項目中如何導入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