我正在建立一个侧面导航在Angular 使用material 侧面导航.但当我绑定[(模式)]时，它总是抛出错误:
The property and event halves of the two-way binding 'mode' are not bound to the same target.个
Find more at 100
index.d.ts(14, 8): The property half of the binding is to the 'MatSidenav' component.
layout.component.ts(5, 6): The event half of the binding is to a native event called 'mode' on the DOM element.个
Are you missing an output declaration called 'modeChange'?个
我的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>我的TS:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { MediaObserver, MediaChange } from '@angular/flex-layout';
import Input from '@material-ui/core/Input';
import { Subscription, map } from 'rxjs';
@Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
})
export class LayoutComponent implements OnInit, OnDestroy {
sideNavOpened = true;
sideNavMode: 'side' | 'over' = 'side';
toolBarHeight = 64;
private readonly mediaWatcher: Subscription;
constructor(media: MediaObserver) {
this.mediaWatcher = media
.asObservable()
.pipe(map((changes: MediaChange[]) => changes[0]))
.subscribe((change: MediaChange) => {
if (change.mqAlias === 'sm' || change.mqAlias === 'xs') {
if (this.sideNavOpened) {
this.sideNavOpened = false;
}
this.sideNavMode = 'over';
} else {
this.sideNavOpened = true;
this.sideNavMode = 'side';
}
if (change.mqAlias === 'xs') {
this.toolBarHeight = 56;
} else {
this.toolBarHeight = 64;
}
});
}
ngOnInit() {}
ngOnDestroy(): void {
this.mediaWatcher.unsubscribe();
}
}我不知道该怎么解决这个问题.请帮帮我.非常感谢.