在 Angular 应用程序中使用 Material Drawer 组件

Question

如何将 Material Drawer 组件集成到 Angular 应用程序中？我无法使用https://material.io/develop/web/components/drawers/中的说明正确渲染它

有人可以提供一步一步的说明来使 mdc-drawer 像演示中所示的那样工作吗？

Answer 1

你可以这样一步一步来。

第 1 步：- 在您的项目中使用此命令npm install @angular/material 安装角度材料。

第 2 步：- 将此添加到您的 index.html 标头中

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

第 3 步：- 在您的 app.modules.ts 或根模块文件中导入以下模块。

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

第 4 步：- 将这些模块添加到 imports 数组中。

第 5 步：- 将此添加到您的 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>

第 6 步：- 将此添加到您的 ts 文件中。

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

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

第 7 步 :- 将此添加到您的组件 scss 文件中。

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

第 8 步：- 将此添加到您的 style.scss 文件中。

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

请查看working demo

如果您仍然遇到任何问题，请告诉我。