在 Angular 应用中使用 Material 抽屉组件

Question

如何将 Material 抽屉组件集成到 Angular 应用程序中？我无法使用 https://material.io/develop/web/components/drawers/

中的说明正确渲染它

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

Answer 1

你可以这样一步一步来。

步骤 1:- 在您的项目中使用此命令 npm install @angular/material 安装 angular material。

步骤 2:- 将此添加到您的 index.html header

<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

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

在 Angular 应用中使用 Material 抽屉组件

Using the Material Drawer component in an Angular app

drawer

typescript

angular-material

angular

mdc-components