无法绑定到“模式”，因为它不是“ mat-sidenav”的已知属性

时间：2019-06-28 07:49:19

标签： javascript angular angular-material navbar sidenav

嗨，我不知道该怎么办

这是错误

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)

我的结构就是这样

enter image description here

  1. Sidenav由@angular/material:material-nav --name=sidenav

    2. 生成

  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 { }

2 个答案:

答案 0 :(得分：0)

该错误表明您在尝试使用MatSidenavModule的模块中无法正确导入ComponentsModule。该错误表明失败发生在MaterialModule中，因此丢失了导入。您需要将MatSidenavModule或ComponentsModule导入intArrayOf(args...)。

答案 1 :(得分：0)

我刚遇到类似的问题。我已经正确设置了所有模块，但是HTML找不到材料sidenav。

最后，事实证明我不小心从app.module.ts的声明部分删除了AppComponent：

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

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

希望这会帮助其他人；我怀疑原来的海报早已不复存在。

相关问题
最新问题