Angular9 生成路由應(yīng)用

下面的命令會(huì)用 Angular CLI 來生成一個(gè)帶有應(yīng)用路由模塊（AppRoutingModule）的基本 Angular 應(yīng)用，它是一個(gè) NgModule，可用來配置路由。下面的例子中應(yīng)用的名字是 routing-app。

ng new routing-app --routing

一旦生成新應(yīng)用，CLI 就會(huì)提示你選擇 CSS 或 CSS 預(yù)處理器。在這個(gè)例子中，我們接受 CSS 的默認(rèn)值。

為路由添加組件

為了使用 Angular 的路由器，應(yīng)用至少要有兩個(gè)組件才能從一個(gè)導(dǎo)航到另一個(gè)。要使用 CLI 創(chuàng)建組件，請?jiān)诿钚休斎胍韵聝?nèi)容，其中 first 是組件的名稱：

ng generate component first

為第二個(gè)組件重復(fù)這個(gè)步驟，但給它一個(gè)不同的名字。這里的新名字是 second。

ng generate component second

CLI 會(huì)自動(dòng)添加 Component 后綴，所以如果在編寫 first-component，那么其組件名就是 FirstComponentComponent。

本指南適用于 CLI 生成的 Angular 應(yīng)用。如果你是手動(dòng)工作的，請確保你的 "index.html" 文件的 <head& 中有 <base href="/"& 語句。這里假定 "app" 文件夾是應(yīng)用的根目錄，并使用 "/" 作為基礎(chǔ)路徑。

導(dǎo)入這些新組件

要使用這些新組件，請把它們導(dǎo)入到該文件頂部的 AppRoutingModule 中，具體如下：

//AppRoutingModule (excerpt)


import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';