不能绑定到“mode”，因为它不是“mat-sidenav”的已知属性。

Question

嗨，我不知道该怎么处理这个

这是错误

compiler.js:2430 Uncaught Error: Template parse errors:
Can't bind to 'mode' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'mode' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [ERROR ->][mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    "): ng:///ComponentsModule/SidenavComponent.html@3:6
Can't bind to 'opened' since it isn't a known property of 'mat-sidenav'.
1. If 'mat-sidenav' is an Angular component and it has 'opened' input, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("et$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [ERROR ->][opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
"): ng:///ComponentsModule/SidenavComponent.html@4:6
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === false">
    [ERROR ->]<mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
"): ng:///ComponentsModule/SidenavComponent.html@5:4
'mat-nav-list' is not a known element:
1. If 'mat-nav-list' is an Angular component, then verify that it is part of this module.
2. If 'mat-nav-list' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
      [opened]="(isHandset$ | async) === false">
    <mat-toolbar>Menu</mat-toolbar>
    [ERROR ->]<mat-nav-list>
      <a mat-list-item href="#">Link 1</a>
      <a mat-list-item href="#">Link 2</a>
"): ng:///ComponentsModule/SidenavComponent.html@6:4
'mat-sidenav' is not a known element:
1. If 'mat-sidenav' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<mat-sidenav-container class="sidenav-container">
  [ERROR ->]<mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialo"): ng:///ComponentsModule/SidenavComponent.html@1:2
'mat-icon' is not a known element:
1. If 'mat-icon' is an Angular component, then verify that it is part of this module.
2. If 'mat-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        [ERROR ->]<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>tester</span>"): ng:///ComponentsModule/SidenavComponent.html@20:8
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
2. If 'mat-toolbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
  </mat-sidenav>
  <mat-sidenav-content>
    [ERROR ->]<mat-toolbar color="primary">
      <button
        type="button"
"): ng:///ComponentsModule/SidenavComponent.html@13:4
'mat-sidenav-content' is not a known element:
1. If 'mat-sidenav-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
    </mat-nav-list>
  </mat-sidenav>
  [ERROR ->]<mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
"): ng:///ComponentsModule/SidenavComponent.html@12:2
'mat-sidenav-container' is not a known element:
1. If 'mat-sidenav-container' is an Angular component, then verify that it is part of this module.
2. If 'mat-sidenav-container' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewp"): ng:///ComponentsModule/SidenavComponent.html@0:0
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)

我的结构是这样的

​

​

1. Sidenav由@angular/material:material-nav --name=sidenav生成
2. 导入从app.module.ts移到app.module.ts，其中包括MatToolbarModule、MatButtonModule、MatSidenavModule、MatIconModule、MatListModule。
3. AdminLayoutComponent和AuthLayoutComponent是这里唯一的组件
4. 材料模块

​

import { NgModule } from '@angular/core';
import { MatToolbarModule, MatButtonModule, MatSidenavModule, MatIconModule, MatListModule } from '@angular/material';


@NgModule({
  imports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ],
  exports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule
  ]
})
export class MaterialModule { }

​

Answer 1

我刚刚遇到了一个类似的问题。我已经把所有的模块都设置好了，但是HTML就是找不到侧面的材料。

最后，我意外地将AppComponent从app.module.ts的声明部分中删除了：

​

@NgModule({
    imports: [
        MatSidenavModule,
      ],
    declarations: [
        AppComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

​

我没有‘使用它’；我只是使用组件的HTML部分.所以我必须删除声明才能保持整洁。结果是，模块使用这个声明来知道谁获得了导入的信息，HTML和javascript和css部件一样是组件的一部分。

希望这能对其他人有所帮助；我怀疑原来的海报早就消失了。

Answer 2

此错误证明您未能在试图使用MatSidenavModule的模块中正确导入它。此错误指示在ComponentsModule中发生故障，因此导入丢失。您需要将MaterialModule或MatSidenavModule导入ComponentsModule。