我尝试了npm i @angular/material，它将@angular/material包安装到我的angular CLI项目中。
然后我尝试了ng add @angular/material，我得到提示选择不同的主题，我期待style.scss有一些变化，但没有变化。
两个命令的输出有什么不同?
npm i @angular/material只安装@angular/material包。
另一方面，ng add @angular/material-
- 安装
@angular/material包 - 安装
@angular/cdk和@angular/animations包 - 为您的应用程序设置主题
- 设置全局的Angular材质排版样式(可选)
- 为Angular Material设置浏览器动画(可选)
在您的styles.scss文件中，将添加以下行—
html,
body {
height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
在angular.json文件中，您将找到对所选主题的引用-
"styles": [
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
"src/styles.scss"
],
如果你允许设置材质排版，那么class="mat-typography"和链接到Roboto字体和Material Icon将被添加到你的index.html文件-
<head>
...
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body class="mat-typography">
<dx-root></dx-root>
</body>
如果您允许设置浏览器动画，那么您会发现BrowserAnimationsModule很容易被导入并添加到app.module.ts-
imports:数组中。import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
// and
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule
],
这里有很好的文档- Install Angular Material