继续上次的内容，上次的内容为angular整合ng-zorro、左边导航栏。 首先新建一个组件,下面代码会在src/app/pages路径下新建一个menus的组件
ng g component pages/menus
新建完组件后删除ponent.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对应上了，接下来只要把ponent.html中的代码改为menus work 运行项目就可以看到效果了。 接下来要做的是在ponent.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, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';import {WelcomeRoutingModule } from './welcome-routing.module';import {WelcomeComponent } from './ponent';import {NzTableModule } from 'ng-zorro-antd/table';import {CommonModule } from '@angular/common';@NgModule({imports: [WelcomeRoutingModule, NzTableModule, CommonModule],declarations: [WelcomeComponent],exports: [WelcomeComponent],schemas: [CUSTOM_ELEMENTS_SCHEMA]})export class WelcomeModule {}
然后根据官网的代码，修改ponent.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>
然后修改ponent.ts
import {Component, OnInit } from '@angular/core';interface Person {key: string;name: string;age: number;address: string;}@Component({selector: 'app-welcome',templateUrl: './ponent.html',styleUrls: ['./ponent.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() {}}
这就达到了下面的效果
