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

在上一篇博客中，我们实现了用户登录功能，并介绍了如何在angular中使用cookie，以及angular中路由事件的使用。在这期博客中，我们将开始开发我们的核心功能——故事系统与评论系统。
我们的故事系统和评论系统如下图所示：

故事系统由一个简单的表单组成，包括标题栏和内容栏，内容栏我们会使用之前安装好的ngx-quill富文本框插件来实现，以支持富文本功能。
我们的评论系统如下图所示：

用户可以对每篇故事发表评论，且可以对故事下的每篇评论再次评论，形成一个评论树。
下面，就让我们看看该如何实现这两个系统吧。

十一 故事系统的开发

1 编写故事

前端部分

我们会把整个故事系统和评论系统作为一个新的模块来开发，因此我们需要建立一个新的angular模块。
在cmd中输入如下命令，让angular为我们建立一个新的模块：

ng g module story

这样，angluar就会为我们建立一个新的story模块，我们可以把这个模块加到app.module.ts文件中：

//...
import {
    StoryModule } from './story/story.module';
@NgModule({
   
  declarations: [
  	//...
  ],
  imports: [
	//...
    StoryModule,
  ],
  providers: [CookieService],
  bootstrap: [AppComponent]
})
export class AppModule {
    }

接下来，让我们在story模块中建立writestory组件，用于编写故事。在cmd中输入以下命令，在story模块中建立writestory组件：

ng g c -m story

-m story表示我们要在story模块中建立这个组件，而不是在根模块下建立。
现在，让我们把所有需要的组件和模块都导入到story模块中，包括之后要在评论系统中使用的模块：

//story.module.ts
import {
    NgModule } from '@angular/core';
import {
    CommonModule } from '@angular/common';
import {
    NzFormModule } from 'ng-zorro-antd/form';
import {
    NzInputModule } from 'ng-zorro-antd/input';
import {
    NzButtonModule } from 'ng-zorro-antd/button';
import {
    FormsModule } from '@angular/forms';
import {
    ReactiveFormsModule } from '@angular/forms';
import {
    NzDividerModule } from 'ng-zorro-antd/divider';
import {
    NzSpaceModule } from 'ng-zorro-antd/space';
import {
    NzCardModule } from 'ng-zorro-antd/card';
import {
    QuillModule } from 'ngx-quill';
import {
    NzLayoutModule } from 'ng-zorro-antd/layout';
import {
    NzIconModule } from 'ng-zorro-antd/icon';
import {
    IconDefinition } from '@ant-design/icons-angular';
import {
    NzCollapseModule } from 'ng-zorro-antd/collapse';
import {
    NzCommentModule } from 'ng-zorro-antd/comment';
import {
    NzAvatarModule } from 'ng-zorro-antd/avatar';
import {
    StarOutline, CommentOutline, LikeOutline } from '@ant-design/icons-angular/icons';
import {
    NzListModule } from 'ng-zorro-antd/list';

const icons: IconDefinition[] = [ StarOutline, CommentOutline, LikeOutline ];
@NgModule({
   
  declarations: [
  ],
  imports: [
    CommonModule,
    NzFormModule,
    NzInputModule,
    NzButtonModule,
    FormsModule,
    ReactiveFormsModule,
    NzDividerModule,
    NzSpaceModule,
    NzCardModule,
    QuillModule.forRoot(),
    NzLayoutModule,
    NzIconModule.forRoot(icons),
    NzCollapseModule,
    NzCommentModule,</