来自另一个组件的引用模板

Question

我有一个 header 和一个边栏组件。我试图到达侧边栏组件中的抽屉。我的目标是，如果用户单击 header 组件中的按钮，则抽屉会在侧边栏组件中切换。

为此，我在边栏组件中引用了抽屉，在 header 组件中引用了边栏本身。然后在点击事件中我有这个：

this.appSidebar.drawer.instance.toggle();

问题是，appSidebar 未定义。所以问题是，我应该如何修改 stackblitz 以获得正确的行为？ Input 和 Output 只针对 child-parent 关系，对吧？

这里是 stackblitz：https://stackblitz.com/edit/angular-dxpopup-mz69rq

Answer 1

是的。 Input 和 Output 仅针对组件之间的父子关系。你要做的是你已经有了父子关系，即 AppComponent 是 HeaderComponent 和 SidebarComponent 的父级。您只需要重构您的逻辑，以便操作通过共同的父级从一个兄弟姐妹流向另一个兄弟姐妹。

尝试

在你的 header.component.ts

export class HeaderComponent {
  @Output() hamburgerClicked: EventEmitter<any> = new EventEmitter<any>(); // this will enable the parent component to listen to button clicks.

  public hamburgerOpt = {
    text: "button",
    onClick: () => {
      this.hamburgerClicked.emit();
    }
  };
}

app.component.ts

export class AppComponent {
  @ViewChild("appsidebar") appSidebar: SidebarComponent;
  onHamburgerClick(){ // parent can toggle the drawer in the ViewChild once the event is triggered.
    this.appSidebar.drawer.instance.toggle();
  }
}

app.component.html

<app-header (hamburgerClicked)="onHamburgerClick()"></app-header>
<app-sidebar #appsidebar></app-sidebar>

来自另一个组件的引用模板

reference template from another component

sidebar

parent-child

angular