项目中如何导入Angular素材？

Question

我已经安装了 Angular Material Design。 现在我尝试将其添加到app.module.ts文件中：

import { MaterialModule } from '@angular/material';

我应该在部分中说明什么： imports: [] ？ 加载所有材料实体。

我试过： imports: ['MaterialModule']但它已被弃用

Answer 1

Angular 9.0.1 更新

由于此版本在根 index.d.ts 中没有用于大量导出的桶文件。 资产进口应该是：

import { NgModule } from '@angular/core';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule} from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

来源： @angular/material/index.d.ts' 不是模块

---

MaterialModule 在 2.0.0-beta.3 版本中被折旧，并且在 2.0.0-beta.11 版本中被完全删除。 有关更多详细信息，请参阅此 变更日志。 请完成重大更改。

重大变化

• Angular Material 现在需要 Angular 4.4.3 或更高版本
• MaterialModule已被移除。
• 对于 beta.11，我们已决定完全弃用“md”前缀并继续使用“mat” 。

请通过CHANGELOG我们会得到更多的答案！

示例如下 cmd

npm install --save @angular/material @angular/animations @angular/cdk
npm install --save angular/material2-builds angular/cdk-builds

在“app”文件夹中创建文件（material.module.ts）

import { NgModule } from '@angular/core';

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

在 app.module.ts 上导入

import { MaterialModule } from './material.module';

您的组件 html 文件

<div>
  <mat-toolbar color="primary">
    <span><mat-icon>mood</mat-icon></span>

    <span>Yay, Material in Angular 2!</span>

    <button mat-icon-button [mat-menu-trigger-for]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
  </mat-toolbar>
  <mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item>Option 1</button>
    <button mat-menu-item>Option 2</button>
  </mat-menu>

  <mat-card>
    <button mat-button>All</button>
    <button mat-raised-button>Of</button>
    <button mat-raised-button color="primary">The</button>
    <button mat-raised-button color="accent">Buttons</button>
  </mat-card>

  <span class="done">
    <button mat-fab>
      <mat-icon>check circle</mat-icon>
    </button>
  </span>
</div>

添加全局 css 'style.css'

@import 'https://fonts.googleapis.com/icon?family=Material+Icons';
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 

你的组件 css

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

mat-card {
  max-width: 80%;
  margin: 2em auto;
  text-align: center;
}

mat-toolbar-row {
  justify-content: space-between;
}

.done {
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: white;
}

如果有人没有得到输出，请使用下面的说明

除了上面的接口（material.module.ts），你也可以直接在 app.module.ts 中使用下面的代码。

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MdButtonModule, MdCardModule, MdMenuModule, MdToolbarModule, MdIconModule, MatAutocompleteModule, MatInputModule,MatFormFieldModule } from '@angular/material';

所以这种情况下你不想导入

import { MaterialModule } from './material.module';

在 app.module.ts

Answer 2

在 Angular 9 中导入所有 Angular Material 模块。

在 your_project/src/app/ 目录中创建 material.module.ts 文件并粘贴此代码。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatMenuModule } from '@angular/material/menu';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatBadgeModule } from '@angular/material/badge';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatStepperModule } from '@angular/material/stepper';
import { MatTabsModule } from '@angular/material/tabs';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatDialogModule } from '@angular/material/dialog';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';


@NgModule( {
    imports: [
        CommonModule,
        BrowserAnimationsModule,
        MatCheckboxModule,
        MatCheckboxModule,
        MatButtonModule,
        MatInputModule,
        MatAutocompleteModule,
        MatDatepickerModule,
        MatFormFieldModule,
        MatRadioModule,
        MatSelectModule,
        MatSliderModule,
        MatSlideToggleModule,
        MatMenuModule,
        MatSidenavModule,
        MatBadgeModule,
        MatToolbarModule,
        MatListModule,
        MatGridListModule,
        MatCardModule,
        MatStepperModule,
        MatTabsModule,
        MatExpansionModule,
        MatButtonToggleModule,
        MatChipsModule,
        MatIconModule,
        MatProgressSpinnerModule,
        MatProgressBarModule,
        MatDialogModule,
        MatTooltipModule,
        MatSnackBarModule,
        MatTableModule,
        MatSortModule,
        MatPaginatorModule

    ],
    exports: [
        MatButtonModule,
        MatToolbarModule,
        MatIconModule,
        MatSidenavModule,
        MatBadgeModule,
        MatListModule,
        MatGridListModule,
        MatInputModule,
        MatFormFieldModule,
        MatSelectModule,
        MatRadioModule,
        MatDatepickerModule,
        MatChipsModule,
        MatTooltipModule,
        MatTableModule,
        MatPaginatorModule
    ],
    providers: [
        MatDatepickerModule,
    ]
} )

export class AngularMaterialModule { }

Answer 3

如果要导入所有Material 模块，请创建自己的模块，即material.module.ts并执行以下操作：

 import { NgModule } from '@angular/core'; import * as MATERIAL_MODULES from '@angular/material'; export function mapMaterialModules() { return Object.keys(MATERIAL_MODULES).filter((k) => { let asset = MATERIAL_MODULES[k]; return typeof asset == 'function' && asset.name.startsWith('Mat') && asset.name.includes('Module'); }).map((k) => MATERIAL_MODULES[k]); } const modules = mapMaterialModules(); @NgModule({ imports: modules, exports: modules }) export class MaterialModule { }

然后将模块导入你的app.module.ts

Answer 4

MaterialModule在beta3版本中被弃用，其目标是开发人员应该只将他们将要使用的内容导入到他们的应用程序中，从而改进包的大小。

开发人员现在有两个选择：

• 创建一个自定义MyMaterialModule ，它导入/导出您的应用程序需要的组件，并且可以由应用程序中的其他（功能）模块导入。
• 直接将模块需要的单个材料模块导入其中。

以以下为例（摘自资料页）

第一种方法：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MdButtonModule, MdCheckboxModule],
  exports: [MdButtonModule, MdCheckboxModule],
})
export class MyOwnCustomMaterialModule { }

然后您可以将此模块导入到您的任何模块中。

第二种方法：

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MdButtonModule, MdCheckboxModule],
  ...
})
export class PizzaPartyAppModule { }

现在您可以在PizzaPartyAppModule声明的所有组件中使用各自的材料组件

值得一提的是：

• 使用最新版本的材料，如果你想让动画工作，你需要将BrowserAnimationsModule导入你的主模块
• 使用最新版本，开发人员现在需要将@angular/cdk添加到他们的package.json （材料依赖）
• 始终在BrowserModule之后导入材料模块，如文档所述：

无论您使用哪种方法，请务必在 Angular 的 BrowserModule 之后导入 Angular Material 模块，因为导入顺序对 NgModules 很重要。

Answer 5

从Angular 版本 9 开始：

突破性变化：

无法再通过“@angular/material”导入组件。 使用单独的辅助入口点，例如@angular/material/button。

这意味着：

import { MatInputModule, MatCardModule } from "@angular/material";

变成：

import { MatInputModule } from "@angular/material/input";
import { MatCardModule } from "@angular/material/card";

Answer 6

第1步

yarn add @angular/material @angular/cdk @angular/animations

第 2 步 - 创建一个包含所有材质 UI 模块的新文件（ /myApp/src/app/material.module.ts ）（没有快捷方式，您必须一个一个地包含各个模块）

import { NgModule } from '@angular/core';

    import {
      MatButtonModule,
      MatMenuModule,
      MatToolbarModule,
      MatIconModule,
      MatCardModule
    } from '@angular/material';

    @NgModule({
      imports: [
        MatButtonModule,
        MatMenuModule,
        MatToolbarModule,
        MatIconModule,
        MatCardModule
      ],
      exports: [
        MatButtonModule,
        MatMenuModule,
        MatToolbarModule,
        MatIconModule,
        MatCardModule
      ]
    })
    export class MaterialModule {}

第 3 步 - 将新创建的模块导入并添加到您的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MaterialModule } from './material.module'; // material module imported

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MaterialModule // MAteria module added
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 7

为 Angular 项目安装和添加材料

有一种自动/简单的方法可以将材质添加到 Angular 项目。 通过运行以下命令，使用 Angular CLI 的安装示意图设置您的 Angular Material 项目：

ng add @angular/material

ng add 命令还会额外执行以下配置：

• 将项目依赖添加到 package.json
• 将 Roboto 字体添加到您的 index.html
• 将 Material Design 图标字体添加到您的 index.html
• 添加一些全局 CSS 样式到：
  • 从正文中删除边距
  • 设置高度：html 和 body 上的 100%
  • 将 Roboto 设置为默认应用程序字体

你完成了！ Angular Material 现在配置为在您的应用程序中使用。

在此处阅读更多相关信息

Answer 8

我正在使用 Angular CLI 9.1.4，我所做的只是运行：

ng add @angular/material

并且安装了所有角度材料包，并更新了我的 package.json 文件。

这是完成任务的最简单方法。

Answer 9

您应该考虑将 SharedModule 用于应用程序的基本材料组件，然后将您需要使用的每个模块导入到功能模块中。 我写了一篇关于媒体的文章，解释了如何导入 Angular 材料，请查看：

https://medium.com/@benmohamehdi/how-to-import-angular-material-angular-best-practices-80d3023118de

Answer 10

最重要的是，答案有效，但问题是它不影响项目，所以你需要重新启动你的工作

Ctl+c

ng serve

Answer 11

单击此处查看错误消息屏幕截图

如果您收到此错误“compiler.js:2430 Uncaught Error: Unexpected directive 'MatIcon'imported by the module 'AppModule'。请添加@NgModule 注释”

请不要从 @angular/material 导入 MatIcon。

只需在下面导入： import { MatIconModule } from '@angular/material';

---

如何导入角材料？

您可以运行以下命令。 ng 添加@angular/material