Ant Design of Angular---NG ZORRO引入样式上的问题

最新推荐文章于 2024-06-04 09:42:43 发布

学废的漪婷

最新推荐文章于 2024-06-04 09:42:43 发布

阅读量568

点赞数

分类专栏： Angular 文章标签： angular.js

本文链接：https://blog.csdn.net/weixin_54595386/article/details/127574313

版权

Angular 专栏收录该内容

3 篇文章

订阅专栏

博客介绍了Ant Design of Angular—NG ZORRO，它与@angular/core主版本号相同，目前支持Angular ^14.0.0版本。还说明了升级版本、手动安装、引入样式和组件模块的方法。此外，针对使用nz - form报错问题，给出从@angular/forms导入ReactiveFormsModule的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ant Design of Angular—NG ZORRO

支持 Angular 版本

ng-zorro-antd 与 @angular/core 保持相同的主版本号，目前支持 Angular ^14.0.0 版本。

升级当前Angular版本（^13.0.0）

npm install -g @angular/cli@latest

查看当前版本号

ng version
ng --version

手动安装

npm install ng-zorro-antd --save

引入样式

使用全部组件样式

该配置将包含组件库的全部样式，如果只想使用某些组件请查看使用特定组件样式配置。
在 angular.json 中引入了


{
  "styles": [
    "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
  ]
}

在 style.css 中引入预构建样式文件

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

引入组件模块

最后你需要将想要使用的组件模块引入到你的 app.module.ts 文件和特性模块中。
以下面的 NzButtonModule 模块为例，先引入组件模块：

import { NgModule } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    NzButtonModule
  ]
})
export class AppModule { }

然后在模板中使用：

<button nz-button nzType="primary">Primary</button>

Form表单

在这里插入图片描述

创建完成发现访问项目的时候，在使用nz-form时报错Can’t bind to ‘formGroup’ since it isn’t a known property of ‘form’，百度了下解决方案：
需要从@angular/forms导入ReactiveFormsModule。因为FormGroupDirective 指令属于ReactiveFormsModule一部分。
导入后的app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

registerLocaleData(zh);

@NgModule({
  declarations: [
  ],
  imports: [
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }