要解决Angular Material的Sidenav被渲染但不显示的问题,你可以尝试以下解决方法:
MatSidenavModule
和MatIconModule
。import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
imports: [
MatSidenavModule,
MatIconModule
],
...
})
export class YourModule { }
标签,并设置了必要的属性。例如,你需要设置opened
属性来指定Sidenav是否默认打开。
@ViewChild
来获取对Sidenav的引用,并在需要时打开/关闭它。import { MatSidenav } from '@angular/material/sidenav';
export class YourComponent {
@ViewChild(MatSidenav) sidenav: MatSidenav;
toggleSidenav() {
this.sidenav.toggle();
}
}
确保在模板中的适当位置调用toggleSidenav()
函数。
!important
来确保其样式生效。.mat-sidenav {
width: 200px !important;
}
通过检查以上几个方面,你应该能够解决Angular Material的Sidenav被渲染但不显示的问题。