向全栈迈进——Angular+Tornado开发树洞博客（三）

在上一期博客中，我们建立了第一个angular项目，并介绍了angular项目中的重要文件。在这期博客中，我们开始安装重要的第三方插件，并开始编写我们的第一个angular组件。

六 使用npm命令安装第三方组件

我们首先来安装NG-ZORRO，这是一个遵循Ant Design设计规范的Angular UI组件库，提供了非常多的常用组件，任何组织、企业和个人均可免费使用。我们在cmd中进入到项目目录，输入以下命令来安装NG-ZORRO：

npm install ng-zorro-antd@11 --save

这里使用–save参数的含义是，将ng-zorro-antd库安装到项目里的node_modules目录中，并将其添加到package.json的dependencies属性下。
稍等一会，如果出现以下画面，说明ng-zorro-antd安装完成：

接下来，继续安装ngx-cookie-service，我们要使用这个库来操作cookies。在cmd中输入以下命令：

npm install ngx-cookie-service@11 --save

这里我们选择11版，和我们的angular版本保持一致。
然后，让我们安装ngx-quill，这是一个富文本编辑器，让我们可以尽情编写我们的故事。
相比以上两个组件，这个组件的安装略有些麻烦，依次在cmd中输入以下命令：

npm install ngx-quill@13 --save
npm install quill@1 --save
npm install @types/quill@1 --save

如果都没有报错的话，说明这个组件安装完成了。这里再给出一个ngx-quill的官方npm地址，有问题的话可以参考官方文档：ngx-quill官方文档。
在安装完上面三个组件后，我们就可以开始写我们的第一个angular组件了。

七 编写我们的第一个组件

在angular中，我们使用angular提供的ng工具来生成一切东西，包括组件、模块、服务等。我们这次就来使用ng生成一个组件，作为我们网站的主页面。
在cmd中输入以下命令，让ng来生成一个名为mainlayout的组件作为我们的主页面：

ng g c mainlayout

ng是命令名，g为generate的缩写，c为component的缩写，所以这句命令就告诉angular，我们要使用ng来生成一个名为mainlayout的组件。
如果看到以下画面，说明组件建立成功：

我们在IDE里也可以看到app目录下新增了一个同名目录，下面包含组件四件套的文件：

此外，我们会发现在app.module.ts文件，也会自动将我们的layout组件引入：

一个组件主要包含三部分：html文件，决定了前端要将呈现在浏览器中的样子；css/scss文件，决定了在这个组件中html文件的样式；ts文件，决定了前端页面背后的逻辑，包括不同组件之间的通信、与后端服务器的通信等。我们将分别编写组件的html文件、scss文件和ts文件，从而完成对主页面的开发。

1 编写html文件

由于是主框架，我们决定使用NG-ZORRO中提供的经典上中下布局方式，因此我们需要在项目中引用NzLayoutModule，以便使用NG-ZORRO提供的各种布局元素。
我们修改app.module.ts文件，将NzLayoutModule引；此外，我们在这个页面中还要用到菜单组件，因此这里将NzMenuModule和NzDropDownModule一并引入，分别对应导航菜单和下拉菜单

//引入的其他模块

import {
    NzLayoutModule } from 'ng-zorro-antd/layout';
import {
    NzDropDownModule } from 'ng-zorro-antd/dropdown';
import {
    NzMenuModule } from 'ng-zorro-antd/menu';

@NgModule({
   
  declarations: [
    AppComponent,
    MainlayoutComponent
  ],
  imports: [
  // 引入的其他模块
    NzLayoutModule,
    NzDropDownModule,
    NzMenuModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
    }

这样，我们就可以在项目全局范围内使用NzLayoutModule中的各种组件了。
我们打开mainlayout/mainlayout.component.html文件，开始构造我们的主页面：

<!--mainlayout/mainlayout.component.html-->
<nz-layout class="layout">
  <nz-header>