我想知道是否有办法在 <router-outlet>
之外实现子组件元素,就像在示例中一样,我希望插座内的每个组件都可以在父组件上显示自己的按钮。< /p>
<div class="header">
<h1>Page Title</h1>
<div class="action-buttons">
<!-- child component buttons -->
</div>
</div>
<div id="wrapper">
<router-outlet></router-outlet>
</div>
答案 0 :(得分:0)
我不确定这是否是最好的方法,但我正在做的是每次路线更改时使用 Renderer2 将按钮从子级移动到父级。
this.router.navigate(["/"]).then(() => {
this.moveButtons();
});
private moveButtons() : void {
const parent = document.querySelector('.float-buttons');
const buttonsParent = document.getElementById('childButtons');
parent.childNodes.forEach(child => {
this.renderer.removeChild(parent,child);
});
if(!buttonsParent) return;
const children = buttonsParent.childNodes;
children.forEach(child => {
this.renderer.appendChild(parent, child);
});
}