1.创建文件、模块和组件

创建文件 ng new XXXXX

移动到该文件目录下 cd XXXXX

npm install ng-zorro-antd --save（安装UI库）

ng add ng-zorro-antd（把UI添加到项目）

2.主页面转移模块

原来html，less文件注掉，将新的html，less文件转移到welcome里

如果html报错就注册一下，其实看着报错的是哪个标签，或者是不是前面的标签报错，去百度搜一下，一般在NG-ZORRO里都有

import { NgModule , CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from ‘@angular/core’;

import { WelcomeRoutingModule } from ‘./welcome-routing.module’;

import { WelcomeComponent } from ‘./welcome.component’;

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

import { NzDividerModule } from ‘ng-zorro-antd/divider’;

import { NzLayoutModule } from ‘ng-zorro-antd/layout’;

import { FormsModule ,ReactiveFormsModule} from ‘@angular/forms’;

import { NzMenuModule } from ‘ng-zorro-antd/menu’;

import { NzIconModule } from ‘ng-zorro-antd/icon’;

import { NzFormModule } from ‘ng-zorro-antd/form’;

import { NzAlertModule } from ‘ng-zorro-antd/alert’;

import { HelloComponent } from ‘…/hello/hello.component’;

再import一下

@NgModule({

imports: [

WelcomeRoutingModule,

NzTableModule,

NzDividerModule,

NzLayoutModule,

FormsModule,

NzMenuModule,

NzIconModule,

NzFormModule,

NzAlertModule,

ReactiveFormsModule,

],

3.再写登陆界面

创建文件ng generate component pages/自己的组件名 --module app

1.html

<div class="login-container"><div class="login-header"><h1>试验用小程序</h1></div><form nz-form [formGroup]="form" (ngSubmit)="submit()" role="form"><nz-alert *ngIf="error" [nzType]="'error'" [nzMessage]="error" [nzShowIcon]="true" class="mb-lg"></nz-alert><nz-form-item><nz-form-control [nzErrorTip]="'请输入管理员账号'"><nz-input-group nzSize="large" nzPrefixIcon="user"><input nz-input formControlName="userName" placeholder="账户名" /></nz-input-group></nz-form-control></nz-form-item><nz-form-item><nz-form-control nzErrorTip="'请输入密码'"><nz-input-group nzSize="large" nzPrefixIcon="lock"><input nz-input type="password" formControlName="password" placeholder="密码" /></nz-input-group></nz-form-control></nz-form-item><nz-form-item><button nz-button type="submit" nzType="primary" nzSize="large" nzBlock>登录</button></nz-form-item></form>
</div>

2.less

.login-container {margin-top: 20vh;}
:host {display: block;width: 20rem;margin: 0 auto;::ng-deep{.icon {margin-left: 16px;color: rgba(0, 0, 0, 0.2);font-size: 24px;vertical-align: middle;cursor: pointer;transition: color 0.3s;}}}  

3.ts

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router } from '@angular/router';
@Component({selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {form: FormGroup;error = '';type = 0;count = 0;constructor(fb: FormBuilder,private router:Router) { this.form = fb.group({userName: [null, [Validators.required, Validators.minLength(4)]],password: [null, Validators.required],});}ngOnInit(): void {}submit(){this.router.navigateByUrl("welcome/hello");}
}

4.接着配置路径

{ path: ‘login’ , component:LoginComponent}

5.在modules里宣布一下，这是我的，之后login里所有的import注册都在app的modules里

@NgModule({

declarations: [

AppComponent,

LoginComponent,

],

4.嵌入welcome的表格界面

创建文件 ng generate component pages/自己的组件名 --module pages/welcome

1.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>

2.ts

interface Person {key: string;name: string;age: number;address: string;
}

 public itemList: any[] = [];ngOnInit() {}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'}];

3.配置路径

注意要import一下，前面忘记说了自己import

const routes: Routes = [{ path: '', component: WelcomeComponent ,children: [{ path: 'hello', component: HelloComponent } ]},
];