image.png
輔助路由的功能就是控制多個(gè)router-outlet 進(jìn)行顯示多個(gè)組件 我們要使用輔助路由來完成一個(gè)小型的功能就是 我們?cè)谌魏蔚慕缑娑伎梢杂幸粋€(gè)聊天的界面進(jìn)行聊天 當(dāng)我們切換不同的組件的時(shí)候聊天界面組件并不會(huì)消失 而聊天的界面組件僅僅通過開始聊天和結(jié)束聊天而進(jìn)行開啟和關(guān)閉 要實(shí)現(xiàn)這個(gè)功能就必須用輔助路由進(jìn)行完成 下面是要實(shí)現(xiàn)的效果圖 ：
image.png
完成小案例的實(shí)現(xiàn)思路如下圖 ：
image.png
1.首先我們創(chuàng)建一個(gè) 聊天的組件 ng g component chat
- 我們?cè)趐roduct 組件里面再加入一個(gè) router-outlet
image.png
3.同時(shí)我們要在路由列表中加入一個(gè)路由路徑 并且在后面加入 outlet 屬性來指定上面定義的那個(gè) router-link
image.png
4.接線來我們 在product 模板中加入下面兩行代碼 *********請(qǐng)仔細(xì)看清 routerLink里面的寫法
image.png
- 下面的截圖就是 點(diǎn)擊開始聊天之后的瀏覽器的地址路徑
image.png
6.如果我們想要完成一個(gè)功能就是當(dāng)我們點(diǎn)擊 開始聊天的時(shí)候 一定要跳轉(zhuǎn)到 home組件下稳强，我們可以修改 模板代碼如下 ：
image.png
