小白入門angular-cli的第一次旅程（學(xué)習(xí)目標(biāo) 1. 路由基礎(chǔ)知識）

發(fā)布時間：2020-07-23 09:14:13 來源：網(wǎng)絡(luò) 閱讀：323 作者：伊伊吖吖欄目：web開發(fā)

學(xué)習(xí)路由的相關(guān)內(nèi)容

學(xué)習(xí)目標(biāo)：

1.路由的基礎(chǔ)知識

2.子路由、保護(hù)路由和輔助路由

3.路由實例

一.路由基礎(chǔ)知識

首先,新建一個項目：ng new projectname --routing

名稱	簡介
Routes	路由配置，保存著哪個url對應(yīng)哪個組件，以及在哪個RouterOutlet中展示組件
RouterOutlet	在Html中標(biāo)記路由內(nèi)容呈現(xiàn)位置的占位符指令。
Router	負(fù)責(zé)在運(yùn)行時執(zhí)行路由的對象，可以通過調(diào)用其navigate()和navigateByUrl()方法來導(dǎo)航到一個指定的路由。在component.ts文件中，通過點擊事件來跳轉(zhuǎn)路由，例子： this.router.navigate(['/product'，2])
RouterLink	在HTML中聲明路由導(dǎo)航用的指令
ActivatedRoute	當(dāng)前激活的路由對象,保存著當(dāng)前路由信息，如路由地址，路由參數(shù)等。傳遞路由參數(shù)時需要用到,如路由地址，路由參數(shù)等。通常寫在路由配置Routes的component組件中的componnet.ts文件中

接著，來看一下，這5個對象在實際代碼是怎么寫的。

首先，聲明一下，使用[ng new projectname --routing]，帶--routing參數(shù)生成的項目會新增一個路由配置文件。

小白入門angular-cli的第一次旅程（學(xué)習(xí)目標(biāo) 1. 路由基礎(chǔ)知識）

接著，步一：來在項目中新增兩個組件，ng g component home 和 ng g component product

說明：要寫一個點擊home頁路由跳轉(zhuǎn)到home組件里，點擊product跳轉(zhuǎn)到商品信息組件product組件里

步二：小白入門angular-cli的第一次旅程（學(xué)習(xí)目標(biāo) 1. 路由基礎(chǔ)知識）在圖中選中的文件內(nèi)添加內(nèi)容=》

小白入門angular-cli的第一次旅程（學(xué)習(xí)目標(biāo) 1. 路由基礎(chǔ)知識）

步三: 在app-routing.module.ts中引入這兩個組件文件的類

import {HomeComponent} from './home/home.component';

import {ProductComponent} from './product/product.component';

步四：在app-routing.module.ts中，接著寫路由的配置

const routes: Routes = [

{ path:' ' , component: HomeComponent },

{ path:'product', component: ProductComponent },

] 注意：path項里不能用 '/' 開頭

步五：在app.component.html中

<a [routerLink] = "['/product']">商品詳情</a> 注意：必須用'/'，和 './'來體現(xiàn)是路由到根路由還是子路由

效果展示：

小白入門angular-cli的第一次旅程（學(xué)習(xí)目標(biāo) 1. 路由基礎(chǔ)知識）

向AI問一下細(xì)節(jié)

猜你喜歡