说明
亮点: 该实例,用到了 子模块的概念。 根据网页的layout布局,把相关的 components 组建成一个 module。 一个 app module 由多个 子module 组成。 这就是更深层次的 module 框架的应用。
在该实例中,我创建了 3个 独立的 module。
创建工程,并验证开发环境
ng new myLogin
cd myLogin
ng serve --o
安装 ng-zorro
npm install ng-zorro-antd --save
angular.json 文件,导入 ng-zorro
"styles": [
"src/styles.css" ,
"node_modules/ng-zorro-antd/src/ng-zorro-antd.css"
],
app.module.ts 文件 导入 NgZorroAntdModule
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgZorroAntdModule } from 'ng-zorro-antd';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
NgZorroAntdModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
验证 ng-zorro 是否生效, 在 app.component.html 添加代码,如下:
Buttons
primary
dashed
default
danger
defaultShape
O
L
M
S
L
L
创建 component
ng g c components/login --spec=false
手动创建module ,一个module 包含多个 components。
最终实现的效果
image.png