路由器出口外的 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);
    });
  }