3. 引入样式与 SVG 资源
在 angular.json 文件中引入样式和 SVG icon 资源。
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
在 style.css 文件里：
@import "~ng-zorro-antd/style/index.min.css";
HTML代码
<button nz-button [nzType]="‘danger‘" (click)="showModal()"><span>Show Modal</span></button>
<nz-modal [(nzVisible)]="isVisible" nzTitle="The first Modal" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<p>Content one</p>
<p>Content two</p>
<p>Content three</p>
</nz-modal>
<router-outlet></router-outlet>
ts 文件
ts代码
import { Component } from ‘@angular/core‘;
@Component({
selector: ‘app-root‘,
templateUrl: ‘./app.component.html‘,
styleUrls: [‘./app.component.css‘]
})
export class AppComponent {
isVisible = false;
constructor() {}
showModal(): void {
this.isVisible = true;
}
handleOk(): void {
console.log(‘Button ok clicked!‘);
this.isVisible = false;
}
handleCancel(): void {
console.log(‘Button cancel clicked!‘);
this.isVisible = false;
}
}
