Angular Material SideNav双向绑定[(mode)]报错求助

错误原因 #

Angular的双向绑定语法[(xxx)]要求组件同时提供@Input() xxx输入属性和@Output() xxxChange输出事件。但MatSidenav组件的mode属性仅为输入属性，没有对应的modeChange输出事件，因此无法使用双向绑定，这就是报错的核心原因。

解决方案 #

将双向绑定[(mode)]改为单向属性绑定[mode]即可，你的场景是通过媒体查询主动控制sideNavMode的值，不需要从组件接收mode的反向变更通知，单向绑定完全满足需求。

修改后的HTML代码 #

<div class="layout-container">
  <app-top-nav (sideNavToggled)="snav.toggle()"></app-top-nav>

  <mat-sidenav-container class="sidenav-container" [style.marginTop.px]="toolBarHeight">
    <!-- 替换双向绑定为单向绑定 -->
    <mat-sidenav #snav class="sidenav mat-elevation-z10" [(opened)]="sideNavOpened" [mode]="sideNavMode" >
      <app-side-nav></app-side-nav>
    </mat-sidenav>
    <mat-sidenav-content>
      <main class="main-container">
        <router-outlet></router-outlet>
      </main>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

额外说明 #

• MatSidenav的opened属性支持双向绑定，因为它同时提供了@Input() opened和@Output() openedChange，所以[(opened)]的写法是合法的。
• 你的TS逻辑无需修改，媒体查询控制sideNavMode的代码可以正常工作，单向绑定会自动同步组件的mode值。

内容的提问来源于stack exchange，提问作者Văn Thuận Nguyễn