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

2020-07-06 16:23 更新

下面的命令會(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ì)提示你選擇 CSSCSS 預(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';
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)