Angular 2：如何用路由器传播HTML个元素？

Question

有一个基本的DOM:

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

我从 app.component.html 向所有 DOM children 传播一个 footer 元素。我想知道的是，为什么Back按钮没有出现在子页面A上？

参见 stackblitz。

Answer 1

您需要为此创建子路由。检查此编辑

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

特别是app-routing.module.ts

Answer 2

您必须创建 subchild 作为实际的子路由。否则它将像任何其他路由一样处理并完全替换 <router-outlet> 标记，在本例中为 ChildComponent.

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

此外，您需要在 ChildComponent 的模板中添加第二个 <router-outlet> 标记，其中应该呈现子路径（子子项）。

看看修改后的stackblitz。

Angular 2：如何用路由器传播HTML个元素？

Angular 2: How to propagate HTML elements with router?

javascript

angular

angular-routing

router-outlet