这篇文章的主题

我来解释一下如何将Angular Material的侧边栏（sidenav）实现到Angular项目中。

安装Angular Material和Angular CDK

假设您已经创建了一个Angular项目，我们继续进行下去。
请在项目文件夹中输入以下命令并执行安装。

npm install --save @angular/material @angular/cdk

将Angular Material添加到项目中

请继续输入以下命令，向项目中添加Angular Material库。

ng add @angular/material

通过运行此命令，可以将Angular Material库的依赖项添加到项目中。

实现sidenav组件

生成组件

通过运行以下命令，将Angular Material的sidenav生成为组件并添加进去。

ng generate @angular/material:material-nav --name=test-sidenav

请将“test-sidenav”部分替换为您喜欢的组件名称。
从Angular 6开始，您可以执行ng generate @angular/material:material-nav命令。

组件嵌入

创建组件后，将组件嵌入到HTML中。

<app-test-sidenav></app-test-sidenav>

主题的阅读

可以使用Angular Material提供的模板。
要使用它，只需要在style.css中添加以下一行。

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

以下有四种模板可供选择，您可以选择您喜欢的那一个。

• deeppurple-amber.css

• indigo-pink.css

• pink-bluegrey.css

purple-green.css

请参考这些文献。

Angular Material – Get started