路由器出口外的 Angular 子路由元素

Question

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>

Answer 1

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);
    });
  }