javascript - 无法绑定到“模式”，因为它不是“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.material.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 只是找不到材料 sidenav。

最后发现我不小心从 app.module.ts 的声明部分中删除了 AppComponent：

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

我不是在“使用它”；我只使用了组件的 HTML 部分......所以我必须删除声明以保持整洁。事实证明，该模块使用此声明来了解谁获取了它的导入信息，并且 HTML 与 javascript 和 css 部分一样是组件的一部分。

希望这对其他人有帮助；我怀疑原始海报早已不复存在。

Answer 2

该错误表明您未能MatSidenavModule在尝试使用它的模块中正确导入。该错误表明失败发生在ComponentsModule缺少导入的地方。您需要导入MaterialModule或MatSidenavModule进入ComponentsModule.