Ant Design Of Angular 项目的创建与常见问题

框架特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Angular 组件，与 Angular 保持同步升级。
• 使用 TypeScript 构建，提供完整的类型定义文件。
• 支持 OnPush 模式，性能卓越。
• 数十个国际化语言支持。
• 深入每个细节的主题定制能力。

支持环境

• 现代浏览器和 IE11 及以上（需要 polyfills）
• 支持服务端渲染
• Electron

使用版本

npmv9.1.0

安装

强烈推荐官方的 @angular/cli工具链辅助进行开发，在实际项目开发中，它可以很好的满足对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。

//终端运行以下命令，==PROJECT_NAME==可自行修改
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd

项目结构

关于路由的那些事

一、生成路由文件

按照惯例，有一个独立模块来配置相关路由，这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中。

使用CLI生成它。

ng generate module app-routing --flat --module=app

然后查看src/app目录下是否生成成功。
接下来，我们查看生成的文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

通常不会在路由模块中声明组件，所以可以删除@NgModule.declarations 并删除对 CommonModule 的引用。

二、导出 RouterModule

此刻的AppRoutingModule是这样的：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

三、添加路由定义

典型的Angular路由（Route）有两个属性：
1、path：一个用于匹配浏览器地址栏中URL的字符串。
2、component：当导航到此路由时，路由应该创建哪个组件。
如果说你希望当URL为http://localhost:4200/homePage时，首先要导入HomePageComponent；以便在Route中引用它。
如下：

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {HomePageComponent} from "../home-page/home-page.component";

const routes: Routes = [
  { path: 'homePage', component: HomePageComponent }
];
@NgModule({
  exports: [RouterModule]
})
export class AppRoutingModule { }

RouterModule.forRoot()

初始化路由器，并让它开始监听浏览器的地址变化。（添加到 @NgModule.imports 数组中）

imports: [ RouterModule.forRoot(routes) ],

注意：

查看app.module.ts文件中是否有引入AppRoutingModule。

import { AppRoutingModule } from './app-routing/app-routing.module';
imports: [
    AppRoutingModule
  ],

四、添加路由出口

打开AppComponent的模板，把添加进去，会告诉路由器要在哪里显示路由的试图。

<router-outlet>router-outlet>   // src/app/app.component.html

五、运行项目

查看项目页面，注意你的CLI命令行是否仍在运行：

//输入以下命令运行项目
ng serve

浏览器地址栏输入http://localhost:4200，这个时候你会看到地址栏显示着项目的标题，但是并没有显示HomePageComponent中的内容。

六、添加默认路由

• 方法一：
  当启动项目时，浏览器的地址栏指向的是网站的根路径。它没有匹配到任何现存路由，因此路由器也不会导航到任何地方。
  要让应用自动导航到这个仪表盘，请把下列路由添加到AppRoutingModule.routes数组中。

{ path: '', redirectTo: '/homePage', pathMatch: 'full' },

现在再次访问项目，你会发现地址栏默认会把一个空路径重定向到’/homePage’的路由；并且首页也加载了HomePageComponent。

• 方法二：

{ path: '**', component:DashboardComponent}

意思就是当路由URL等于**时，会去加载DashboardComponent组件；所以你运行你的服务端口号：localhost:4200首先加载的就会是这个组件；
**路径是一个通配符，表示除了以上几种path,任何的路径都会加载DashboardComponent组件，这个记得写在路由配置最后。

七、添加路由链接(routerLink)

不应该让用户只能把路由的 URL 粘贴到地址栏中。他们还应该能通过点击链接进行导航。添加一个

元素，并在其中放一个链接 元素，当点击它时，就会触发一个到 DetailsComponent 的导航。

<div>
  home-page works!
  <nav>
    <a routerLink="/details">点击查看详情a>
  nav>
div>

同时需要把DetailsComponent引入到AppRoutingModule中。
点击查看详情这个链接。地址栏变成了/details，并且页面跳转到详情页。

八、添加详情视图（HTML传参）

现在假设我们首页展示的是一个文章列表，然后我们需要点击每一遍文章查看详情；如果说我们要导航到id为11的文章详情视图，类似于http://localhost:4200/heroes/11的URL。首先打开AppRoutingModule并导入HeroesComponent。

import {HeroesComponent} from "./heroes/heroes.component";

然后把一个参数化路由添加到 AppRoutingModule.routes 数组中，它要匹配指向文章详情视图的路径。

{ path: 'heroes/:id', component: HeroesComponent }

path 中的冒号（:）表示 :id 是一个占位符，它表示某个特定英雄的 id。

此刻，路由就准备就绪了。

然后，我们需要修改HTML页面中的文章列表跳转链接，让它们能够通过参数化的路由进行导航到文章详情页面。

<nav>
    <a routerLink="/heroes/{{id}}">点击查看文章详情a>
    
    <a [routerLink]="['/heroes', num]">点击查看文章详情a>
nav>

现在我们刷新页面点击查看文章详情，你发现，地址栏已经更改为http://localhost:4200/heroes/11，页面展示也已经跳转到文章详情页面模块。

更多内容推荐查看官方文档
参考文档