角度2：如何使用路由器傳播HTML元素？

Question

有一個基本的DOM：

main
- child A        :goBack()
  -- subChild A  :*
- child B        :goBack()

我從app.component.html將footer元素傳播到所有DOM子級。 我想知道的是，為什么“ Back按鈕沒有出現在子子級A頁面上？

參見stackblitz 。

Answer 1

您必須將子代創建為實際的子代路線。 否則，它將像其他任何路線一樣處理，並完全替換<router-outlet>標記（在本例中為ChildComponent 。

const routes: Routes = [
  { path: '', component: MainComponent },
  {
    path: ':child', component: ChildComponent, children: [
      { path: 'subChildA', component: SubChildComponent }
    ]
  },
];

此外，您還需要在ChildComponent模板中的第二個<router-outlet>標記，該子路徑應該用於呈現子路由（子子級）。

看一下修改后的stackblitz 。

Answer 2

您需要為此創建子路由。 檢查此編輯

https://stackblitz.com/edit/angular-oupmd9

特別是app-routing.module.ts