2

我有这个代码来切换抽屉/matsidebar。

应用组件.html

<app-header></app-header>
<mat-toolbar color="accent">
  <mat-toolbar-row>
    <button mat-button (click)="leftbar.toggle()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>
<mat-sidenav-container class="ng-container centered">
  <mat-sidenav #leftbar opened mode="side">
    <app-leftnav></app-leftnav>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

如果我单击菜单图标，左侧栏将切换打开/关闭。没有打字稿或额外服务。它开箱即用。但是，我需要将 mat-toolbar 放在实际的 app-header 组件中。所以相反，我做这样的事情：

应用组件.html

<app-header></app-header>
<mat-sidenav-container class="ng-container centered">
  <mat-sidenav #leftbar opened mode="side">
    <app-leftnav></app-leftnav>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

header-component.html

<mat-toolbar color="accent">
  <mat-toolbar-row>
    <button mat-button (click)="leftbar.toggle()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span>Custom Toolbar</span>
  </mat-toolbar-row>
</mat-toolbar>

这不起作用，因为标题组件按预期不知道#leftbar。我该怎么做呢？我不断看到使用这样的例子：

@ViewChild('leftbar') sidebar: ElementRef;

我一直在研究这个问题，并在模板位于 ts 组件文件中时从 Angular 2 获得旧答案。此外，通常，其中带有抽屉的组件（或任何功能）位于标题内，而不是相反。是否完全有必要为此创建服务？如果是这样，怎么做？在 Angular 8 中执行此操作的最简单、正确和最少的打字稿方式是什么？

4

1 回答 1

2

最简单的方法是从标题组件发出 Output 事件：

header.component.ts

export class HeaderComponent {
  @Output() menuButtonClicked = new EventEmitter();
  ...

header.component.html

<button mat-button (click)="menuButtonClicked.emit()"

app.component.html

<app-header (menuButtonClicked)="leftbar.toggle()"></app-header>
<mat-sidenav-container class="ng-container centered">
  <mat-sidenav #leftbar opened mode="side">
    Side bar
  </mat-sidenav>
  ...
</mat-sidenav-container>

Stackblitz 示例

于 2019-06-10T01:31:51.577 回答