解决方法如下:
// 使用 npm 安装 Angular Material
npm install @angular/material @angular/cdk
// 使用 npm 安装 Bootstrap
npm install bootstrap
angular.json
文件,并添加 Angular Material 和 Bootstrap 的样式和脚本引用。"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.css"
],
"scripts": [
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
import { Component } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private snackBar: MatSnackBar) { }
openSnackBar() {
this.snackBar.open('Hello, Angular Material!', 'Dismiss', {
duration: 2000
});
}
}
这是一个简单的示例,展示了如何在 Angular 项目中同时使用 Angular Material 和 Bootstrap。你可以根据自己的需求和具体的组件,来进行更多的定制化。