Angular 2:如何用路由器传播HTML个元素?
Angular 2: How to propagate HTML elements with router?
有一个基本的DOM:
main
- child A :goBack()
-- subChild A :*
- child B :goBack()
我从 app.component.html
向所有 DOM children 传播一个 footer
元素。
我想知道的是,为什么Back
按钮没有出现在子页面A上?
参见 stackblitz。
您需要为此创建子路由。检查此编辑
https://stackblitz.com/edit/angular-oupmd9
特别是app-routing.module.ts
您必须创建 subchild 作为实际的子路由。否则它将像任何其他路由一样处理并完全替换 <router-outlet>
标记,在本例中为 ChildComponent
.
const routes: Routes = [
{ path: '', component: MainComponent },
{
path: ':child', component: ChildComponent, children: [
{ path: 'subChildA', component: SubChildComponent }
]
},
];
此外,您需要在 ChildComponent
的模板中添加第二个 <router-outlet>
标记,其中应该呈现子路径(子子项)。
看看修改后的stackblitz。
有一个基本的DOM:
main
- child A :goBack()
-- subChild A :*
- child B :goBack()
我从 app.component.html
向所有 DOM children 传播一个 footer
元素。
我想知道的是,为什么Back
按钮没有出现在子页面A上?
参见 stackblitz。
您需要为此创建子路由。检查此编辑
https://stackblitz.com/edit/angular-oupmd9
特别是app-routing.module.ts
您必须创建 subchild 作为实际的子路由。否则它将像任何其他路由一样处理并完全替换 <router-outlet>
标记,在本例中为 ChildComponent
.
const routes: Routes = [
{ path: '', component: MainComponent },
{
path: ':child', component: ChildComponent, children: [
{ path: 'subChildA', component: SubChildComponent }
]
},
];
此外,您需要在 ChildComponent
的模板中添加第二个 <router-outlet>
标记,其中应该呈现子路径(子子项)。
看看修改后的stackblitz。