npm i @Angular/Material 和 ng add @Angular/Material 有什么区别

Har*_*mer 1 angular-material angular

我尝试npm i @angular/material并将@angular/material包安装到我的 Angular CLI 项目中。

然后我尝试ng add @angular/material并提示我在不同的主题之间进行选择,我期待一些更改,style.scss但没有引入任何更改。

两个命令的输出有什么区别?

ati*_*yar 7

npm i @angular/material只安装@angular/material包。

另一方面,ng add @angular/material-

  1. 安装@angular/material软件包
  2. 安装@angular/cdk@angular/animations软件包
  3. 为您的应用程序设置主题
  4. 设置全局 Angular Material 排版样式(可选)
  5. 为 Angular Material 设置浏览器动画(可选)

在您的styles.scss文件中,将添加以下行 -

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}
Run Code Online (Sandbox Code Playgroud)

在该angular.json文件中,您将找到对所选主题的引用 -

"styles": [
    "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
    "src/styles.scss"
],
Run Code Online (Sandbox Code Playgroud)

如果您允许设置材质排版,则和 指向字体的class="mat-typography"链接将添加到您的文件中 -RobotoMaterial Iconindex.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>
Run Code Online (Sandbox Code Playgroud)

如果您允许设置浏览器动画,那么您会发现BrowserAnimationsModule很容易导入并添加到imports:您的数组中app.module.ts-

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// and
imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule
],

Run Code Online (Sandbox Code Playgroud)

这里有详细记录 -安装 Angular Material