angular中怎么把antd的input输入框组件引入到项目中呢
时间: 2023-08-11 08:06:11 浏览: 23
要在Angular项目中使用Ant Design的Input输入框组件,需要先安装并引入Ant Design的UI库和Ant Design的图标库。
1. 安装Ant Design UI库
在终端中使用npm安装Ant Design UI库:
```
npm install ng-zorro-antd --save
```
2. 引入Ant Design UI库
在Angular项目的app.module.ts文件中引入Ant Design UI库:
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { NgZorroAntdModule } from 'ng-zorro-antd'; // 引入Ant Design UI库
@NgModule({
imports: [BrowserModule, FormsModule, NgZorroAntdModule], // 引入Ant Design UI库
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
```
3. 使用Ant Design的Input输入框组件
在你的组件的HTML模板中,可以使用Ant Design的Input输入框组件:
```html
<nz-input [(ngModel)]="inputValue" [nzPlaceHolder]="'请输入内容'"></nz-input>
```
在你的组件的TS文件中,需要定义inputValue字段来存储输入框的值:
```typescript
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<nz-input [(ngModel)]="inputValue" [nzPlaceHolder]="'请输入内容'"></nz-input>
`
})
export class AppComponent {
inputValue: string;
}
```
这样就可以在Angular项目中使用Ant Design的Input输入框组件了。
相关推荐

















