Angular17（2）：angular项目中使用NG-ZORRO

1、使用Angular CLI创建空项目

 ng new angular-admin-web --style=scss

2、执行ng add ng-zorro-antd命令安装

（1）ng add ng-zorro-antd

在angular项目下运行命令 ng add ng-zorro-antd 跟随选项便可完成初始化配置，包括引入国际化文件，导入模块，引入样式文件等工作。

官网脚手架 | NG-ZORRO

 ng add ng-zorro-antd

（2）页面效果

3、手动安装

（1）安装依赖

npm install ng-zorro-antd --save

（2）引入样式

在src/styles.scss中引入基本样式

@import "../node_modules/ng-zorro-antd/ng-zorro-antd.min.css";

4、在组建中按需引入模块使用

welcome.component.html

<button nz-button nzType="primary" (click)='clickHandle()'>按钮</button>
<input type="text" nz-input [(ngModel)]="inputValue" placeholder="请输入" />

welcome.component.ts

import { Component } from '@angular/core';
// 使用ngModel实现数据双向绑定需要引入该模块
import { FormsModule } from '@angular/forms';
// 引入所需模块
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzInputModule } from 'ng-zorro-antd/input';

@Component({
  selector: 'app-welcome',
  standalone: true,
  imports: [ FormsModule, NzButtonModule, NzInputModule ],
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.scss']
})
export class WelcomeComponent {

  inputValue = '';

  clickHandle() {
    console.log('click', this.inputValue);
  }

}

注意：ngModel指令实现了表单元素（如输入框、复选框等）与应用程序数据之间的双向绑定。在angular中使用ngModel时，需要确保已经将FormsModule或ReactiveFormsModule导入到Angular的组件模块中。