Angular 基础知识

angular cli

安装 angular cli

npm install -g @angular/cli

卸载

npm uninstall -g @angular/cli

node 升级

1. 清除 npm 缓存

npm cache clean -f

2. 安装 n 模块

npm install -g n

3. 升级 node 到稳定版本

n stable

4. 查看 node 的版本

node -v

Ng ant-design

引入 ant design

$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ 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";
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */

引入模块组件

以下面的 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>

清除缓存

npm cache clean -f