从另一个抽屉组件控制角材料垫抽屉

Question

我有一个如下所示的 sidenav 菜单，它由标题上的按钮触发。 单击“我的消息”链接后，我试图从 sidenav 抽屉打开另一个带有聊天列表的抽屉。 知道如何让它工作吗？

<mat-sidenav-container
  class="example-sidenav-container"
  [style.marginTop.px]="mobileQuery.matches ? 56 : 0"
>
  <mat-sidenav
    #snav
    [mode]="mobileQuery.matches ? 'over' : 'side'"
    [fixedInViewport]="mobileQuery.matches"
    fixedTopGap="56"
  >
    <mat-nav-list>
      <a mat-list-item routerLink="chat" (click)="drawer()">My messages</a>
      <a mat-list-item routerLink="logout" (click)="this.sidenav.toggle()"
        >Logout
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

我有一个通用服务触发如下抽屉

public setSidenav(sidenav: MatSidenav) {
  this.sidenav = sidenav;
}
public open() {
  return this.sidenav.open();
}
public close() {
  return this.sidenav.close();
}

public toggle(): void {
  this.sidenav.toggle();
}

菜单抽屉组件：

@ViewChild('snav') public sidenav: MatSidenav;
constructor(private sidenavService: DrawerService) {
}
ngOnInit(){}
ngAfterViewInit() {
  this.sidenavService.setSidenav(this.sidenav);
}
logout() {
  this.authenticationService.logout();
}

toggleSidenav() {
  this.toggleActive = !this.toggleActive;
  this.sidenav.toggle();
}

这是我点击My Message链接后要打开的组件的html

<div class="chatform">
  <div class="row">
    <div class="col-md-2">
      <app-contact-list></app-contact-list>
    </div>

    <div class="col-md-10">
      <div class="row">
        <div class="col-md-6 px-0">
          <app-message-list [messages]="messages"></app-message-list>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 px-0">
          <app-message-form
            [message]="message"
            [messages]="messages"
          ></app-message-form>
        </div>
      </div>
    </div>
  </div>
</div>