Angular11andngzorroantd11

Angular11 and ng-zorro-antd 11

创建一个带路由的ng项目
ng new project-name --routing
直接enter键&＃xff08;默认都是No&＃xff09;&＃xff0c;不需要选Yes。
进入项目目录
ng serve --open
打开看下一切正常
添加ng-zorro-antd
ng add ng-zorro-antd
选项默认 No
语言可以选择中文&＃xff0c;模板空模板。

指定文件夹创建两个组件&＃xff1a;
ng g c componens/one
ng g c componens/two

修改app-routing.module.ts

import { NgModule } from &＃39;&＃64;angular/core&＃39;;
import { Routes, RouterModule } from &＃39;&＃64;angular/router&＃39;;
import { OneComponent } from &＃39;./componens/one/one.component&＃39;;
import { TwoComponent } from &＃39;./componens/two/two.component&＃39;;const routes: Routes &＃61; [{path:&＃39;one-component&＃39;,component: OneComponent,},{path:&＃39;two-component&＃39;,component: TwoComponent},
];&＃64;NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

<nav><ul><li><a routerLink&＃61;"/one-component" routerLinkActive&＃61;"active">One Componenta>li><li><a routerLink&＃61;"/two-component" routerLinkActive&＃61;"active">Two Componenta>li>ul>
nav>
<div><router-outlet>router-outlet>
div>


运行结果

再添加个布局&＃xff0c;效果如下。

项目GitHub 地址 &＃xff1a;https://github.com/scqilin/angular11-ng-zorro

ng g c components/hello -m app