注：以下學習筆記均來源于Angular教程_Angular8 Angular9 Angular12入門實戰(zhàn)視頻教程

一、Angular 中的路由

1、Angular 創(chuàng)建一個默認帶路由的項目

2、Angular routerLink 跳轉(zhuǎn)頁面 默認路由

• 跳轉(zhuǎn)頁面 routerLink

• 默認路由

3、Angular routerLinkActive 設(shè)置 routerLink 默認選中路由

• routerLinkActive 的值為樣式的類名

4、路由 get 傳值

news 組件給 newscontent 組件傳值。

• news 組件跳轉(zhuǎn)的時候添加 queryParams

• newscontent 組件引入 ActivatedRoute，獲取 get 方法所傳的值

5、動態(tài)路由傳值

• 首先在 app-routing.module.ts 中進行配置

• news 組件跳轉(zhuǎn)的時候 routerLink 的第二個參數(shù)即為要傳的值

• newscontent 組件獲取傳值

6、動態(tài)路由的 js 跳轉(zhuǎn)

• 配置 productcontent 的路由

• product 組件跳轉(zhuǎn)到 productcontent 組件

• product 組件需要引入 Router 模塊

7、動態(tài) get 傳值的 js 跳轉(zhuǎn)

• 配置 productcontent 的路由

• product 組件跳轉(zhuǎn)到 productcontent 組件

• product 組件需要引入 Router 模塊

8、父子路由（嵌套路由）

• 創(chuàng)建組件并引入組件

• 在父路由中添加路由

• 在父路由組件中使用子路由組件