Angular路由 子路由

在商品詳情頁面，除了顯示商品id資訊，還顯示了商品描述，和銷售員的資訊。

通過子路由實現商品描述元件和銷售員資訊元件展示在商品詳情元件內部。

ng g component productdesc

ng g component sellerinfo

import  from '@angular/core';

import from '@angular/router';
@component()
export 
class sellerinfocomponent implements
oninit 
ngoninit() 
}

const routes: routes =[

, //
路徑為空
, ,
] },
];

<

p>
這裡是商品資訊元件
p>
<
p>
商品id是: }
p>
<
a [routerlink]
="['./']"
>商品描述
a>
<
a [routerlink]
="['./seller',99]"
>銷售員資訊
a>
<
router-outlet
>
router-outlet
>

主路由的商品詳情元件顯示出來了，子路由的空字串對應的商品描述元件也顯示出來了。

url路徑變成：http://localhost:4201/product/2/seller/99。

子路由seller/99，對應的sellerinfo元件也展示出來。

注意：1、插座router-out形成父子關係，可以無限巢狀

路由資訊都是在模組層，所有的元件本身，並不知道任何跟路由相關的資訊。

插座之間的父子關係——子路由。

插座之間的兄弟關係——輔助路由。

angular 路由學習 （四）子路由學習

使用命令新建路由和元件 在crisis center目錄下新建路由元件 ng g module crisis center crisis center module flat routing 在某目錄下新建元件或服務等命令可為 ng g component 目錄名 例如 ng g component...

vue router子路由 路由巢狀

定義 子路由，也叫路由巢狀，採用在children後跟路由陣列來實現，陣列裡和其他配置路由基本相同，需要配置path和component，然後在相應部分新增來展現子頁面資訊，相當於嵌入iframe。hello h1 新增子路由導航 導航 home 首頁 router link home one 子頁...

子路由模組

1ng generate module hero 123 4567 891011import from angular core import from angular common ngmodule export class heromodule 123 4567 8import from ang...