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

Question

我想知道是否有一種方法可以在<router-outlet>之外實現子組件元素，就像在示例中一樣，我希望插座內的每個組件都可以在父組件上顯示自己的按鈕。

<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

我不確定這是否是最好的方法，但我正在做的是每次路線更改時使用 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);
    });
  }