I was wondering if there is a way to implement a child component element out of the <router-outlet>
, like in the example, I wish each component inside of the outlet could show its own buttons on the parent component.
<div class="header">
<h1>Page Title</h1>
<div class="action-buttons">
<!-- child component buttons -->
</div>
</div>
<div id="wrapper">
<router-outlet></router-outlet>
</div>
I'm not sure if it's the best way but what I'm doing is moving the buttons from the child to the parent using Renderer2 every time the route changes.
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);
});
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.