继续上次的内容，上次的内容为angular整合ng-zorro、左边导航栏。
首先新建一个组件,下面代码会在src/app/pages路径下新建一个menus的组件

ng g component pages/menus

新建完组件后删除menus.component.spec.ts文件，这一下文件目录如下图所示：

比较重要的文件我都框起来了，app-routing.module.ts就是路由文件，修改变量routes为:

const routes: Routes = [{ path: '', pathMatch: 'full', redirectTo: '/welcome' },{ path: 'welcome', loadChildren: () => import('./pages/welcome/welcome.module').then(m => m.WelcomeModule) },{ path: 'menus', loadChildren: () => import('./pages/menus/menus.module').then(m => m.MenusModule) }
];

其实就是加入了menus的路径而已，这样一来就跟上一讲中menuList中的routerLink的值menus对应上了，接下来只要把menus.component.html中的代码改为menus work 运行项目就可以看到效果了。
接下来要做的是在welcome.component.html引入ng-zorro表格组件。首先给出官网的链接：
https://ng.ant.design/components/table/zh
使用的方法很简单就是引入下列代码

import { NzTableModule } from 'ng-zorro-antd/table';

注意下这段代码需要在你使用的component中引入，也就是说你在app.module.ts中引用是没用的，需要在welcome.module.ts中引入,修改后代码如下

import { NgModule } from '@angular/core';import { WelcomeRoutingModule } from './welcome-routing.module';import { WelcomeComponent } from './welcome.component';
import { NzTableModule } from 'ng-zorro-antd/table';@NgModule({imports: [WelcomeRoutingModule, NzTableModule],declarations: [WelcomeComponent],exports: [WelcomeComponent]
})
export class WelcomeModule { }

然后根据官网的代码，修改welcome.component.html

 <nz-table #basicTable [nzData]="listOfData"><thead><tr><th>Name</th><th>Age</th><th>Address</th><th>Action</th></tr></thead><tbody><tr *ngFor="let data of basicTable.data"><td>{{ data.name }}</td><td>{{ data.age }}</td><td>{{ data.address }}</td><td><a>Action 一 {{ data.name }}</a><nz-divider nzType="vertical"></nz-divider><a>Delete</a></td></tr></tbody></nz-table> 

然后修改welcome.component.ts

import { Component, OnInit } from '@angular/core';
interface Person {key: string;name: string;age: number;address: string;
}@Component({selector: 'app-welcome',templateUrl: './welcome.component.html',styleUrls: ['./welcome.component.scss']})export class WelcomeComponent implements OnInit {listOfData: Person[] = [{key: '1',name: 'John Brown',age: 32,address: 'New York No. 1 Lake Park'},{key: '2',name: 'Jim Green',age: 42,address: 'London No. 1 Lake Park'},{key: '3',name: 'Joe Black',age: 32,address: 'Sidney No. 1 Lake Park'}];constructor() { }ngOnInit() { }
}

这就达到了下面的效果