创建自定义组件和路由此刻，您的 Angular 应用程序已准备就绪并能工作正常。这个基础应用程序有一个模块、一个组件、一个类、一个模板、元数据和数据绑定 — 但它仍缺少 4 个其他的重要部分：
接下来，您将创建这些自定义组件。
创建自定义组件按 Ctrl-C 停止 Angular 进程（确保您在 Angular 项目的目录中，在本例中为 dw_ng2_app）。在命令提示符下，运行以下命令：
- ng g c Menu -is --spec false --flat：在 AppModule 根模块（同一个文件夹中）内创建 Menu 组件。
- ng g c Weather -is --spec false：在 AppModule 根模块内名为 weather 的子文件夹中创建 Weather 组件。
- ng g c Currency -is --spec false：在 AppModule 根模块内名为 currency 的子文件夹中创建 Currency 组件。
- ng g c Movie -is --spec false：在 AppModule 根模块内名为 movie 的子文件夹中创建 Movie 组件。
现在，有了创建的新组件 — 包括类、元数据和模板 — 您可以看到 AppModule 如何链接到这些组件。在清单 3 中，第 28 行包含 AppModule 模块的声明。此模块包含 5 个组件，包括根组件和其他 4 个组件，如第 14–18 行所示。
清单 3. app.module.ts1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu.component';
import { WeatherComponent } from './weather/weather.component';
import { CurrencyComponent } from './currency/currency.component';
import { MovieComponent } from './movie/movie.component';
@NgModule({
declarations: [
AppComponent,
MenuComponent,
WeatherComponent,
CurrencyComponent,
MovieComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
创建路由路由创建命令我在这里提供了手动创建路由的操作说明。截至编写本文时，创建路由的 CLI 命令正在开发之中。您可以查阅 CLI 网站，看看它现在是否可用。
要让 Angular 能在组件之间导航，需要创建路由。使用清单 4 的内容覆盖 menu.component.html 文件，以便 HTML 包含所有组件的正确菜单。
清单 4. menu.component.html1
2
3
4
5
6
7
8
9
| <div class="row">
<div class="col-xs-12">
<ul class="nav nav-pills">
<li routerLinkActive="active"> <a [routerLink]="['/weather']" >Weather</a></li>
<li routerLinkActive="active"> <a [routerLink]="['/movie']" >Movie Details</a></li>
<li routerLinkActive="active"> <a [routerLink]="['/currency']" >Currency Rates</a></li>
</ul>
</div>
</div>
|
清单 4 中的代码提供了 GUI 与 URL 路径之间的映射。例如，当用户单击 GUI 中的 Movie Details 按钮时，Angular 知道它需要像 URL 路径为 http://localhost:4200/movie 一样运行。
接下来，将 URL 路径映射到组件。在根模块的相同文件夹中，创建一个名为 app.routing.ts 的配置文件，使用清单 5 中的代码作为其内容。
清单 5. app.routing.ts1
2
3
4
5
6
7
8
9
10
11
12
| import { Routes, RouterModule } from '@angular/router';
import { CurrencyComponent } from "./currency/currency.component";
import { WeatherComponent } from "./weather/weather.component";
import { MovieComponent } from "./movie/movie.component";
const MAINMENU_ROUTES: Routes = [
//full : makes sure the path is absolute path
{ path: '', redirectTo: '/weather', pathMatch: 'full' },
{ path: 'weather', component: WeatherComponent },
{ path: 'movie', component: MovieComponent },
{ path: 'currency', component: CurrencyComponent }
];
export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES);
|
在本例中，如果您的 URL 相对路径是 movie，则会告诉 Angular 调用 MovieComponent 组件。换句话说，相对路径 movie 映射到 URL http://localhost:4200/movie。
现在，您需要将此视图链接到它的父组件。使用以下代码覆盖 app.component.html 文件内容：
1
2
3
4
5
| <div class="container">
<app-menu></app-menu>
<hr>
<router-outlet></router-outlet>
</div>
|
<app-menu></app-menu> 选择器会包含菜单。<router-outlet></router-outlet> 选择器是当前组件的占位符。根据 URL 路径，该值可以是以下 3 个组件中的任意一个：天气、电影或货币。
您还必须向该模块告知此路由。在 app.module.ts 文件中添加两项，如清单 6 中的第 11 和 25 行所示。
清单 6. app.module.ts1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { MenuComponent } from './menu.component';
import { WeatherComponent } from './weather/weather.component';
import { CurrencyComponent } from './currency/currency.component';
import { MovieComponent } from './movie/movie.component';
import { CONST_ROUTING } from './app.routing';
@NgModule({
declarations: [
AppComponent,
MenuComponent,
WeatherComponent,
CurrencyComponent,
MovieComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
CONST_ROUTING
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
|
现在，如果您运行应用程序并单击 Weather 链接，应用程序将会显示 weather works!：
 如果单击 Movie Details 链接，应用程序会显示 movie works!：
 如果单击 Currency Rates 链接，应用程序将会显示 currency works!：
 您已成功修改了您的 Angular 应用程序，以便包含多个自定义组件和路由。现在您已经准备好执行最后两个重要操作：
|
