在Angular应用中使用Material Drawer组件。

Question

如何在Angular应用中集成Material Drawer组件？我无法使用在 https:/material.iodevelopwebcomponentsdrawers。

有谁能提供一步步的说明，让mdc-drawer如演示中所示工作？

Answer 1

你可以像这样一步一步地做。

第1步 :-使用这个命令安装angular材料 npm install @angular/material 在您的项目中。

第二步 :-在你的index.html头添加以下内容。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

第三步 :-导入以下模块到你的app.modules.ts或你的根模块文件中。

import { MatSidenavModule } from '@angular/material/sidenav';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';

第四步：将下面的模块导入到你的app模块.ts或你的根模块文件中。 :-将这些模块添加到 imports 阵列。

第五步 :-在你的html文件中加入这个。

<mat-sidenav-container class="example-container" *ngIf="shouldRun">
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" (opened)="events.push('open!')"
               (closed)="events.push('close!')">
    Sidenav content
  </mat-sidenav>

  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <mat-toolbar-row>
        <mat-icon aria-hidden="false" aria-label="Example home icon" (click)="sidenav.toggle()">menu</mat-icon>
        <span>Custom Toolbar</span>
      </mat-toolbar-row>
    </mat-toolbar>
    <p>Events:</p>
    <div class="example-events">
      <div *ngFor="let e of events">{{e}}</div>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

第六步 :-在你的TS文件中加入这个。

events: string[] = [];
opened: boolean;

shouldRun = [/(^|\.)plnkr\.co$/, /(^|\.)stackblitz\.io$/].some(h => h.test(window.location.host));

第七步 :-在你的组件scss文件中添加这个。

.example-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

第八步 :-在你的style.scss文件中添加这个。

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

请检查 工作示范

如果你仍然面临任何问题，请告诉我。