Элемент материала неизвестен во втором шаблоне в том же компоненте в Angular 9 - PullRequest
Новая
       22

Элемент материала неизвестен во втором шаблоне в том же компоненте в Angular 9

0 голосов
/ 17 июня 2020

Я новичок в angular. Я работаю с нижним листом материала в материале angular. В основном файле component.ts я описываю второй файл html с помощью декоратора компонентов, но при компиляции проекта компилятор говорит, что <mat-nav-list> неизвестный элемент. В чем причина?

app.component. html

<div>
  <button mat-stroked-button (click)="openBottomSheet()">Show Bottom Sheet</button>
</div>

app.component.ts 

import { MatBottomSheet, MatBottomSheetRef } from '@angular/material/bottom-sheet';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

constructor(private snackBar: MatSnackBar, private bSheet: MatBottomSheet){}

openBottomSheet(): void {
    this.bSheet.open(BottomSheetExampleSheet);
  }
}
@Component({
  selector: 'bottom-sheet-example-sheet',
  templateUrl: 'bottom-sheet-example-sheet.html',
})
export class BottomSheetExampleSheet {
  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetExampleSheet>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }
}

Второй шаблон, пример-лист нижнего листа. html

<h1>Here we are showing Bottom Sheet</h1>
<div>
    <input>
</div>

<mat-nav-list>
    <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
        <span mat-line>Google Keep</span>
        <span mat-line>Add to a note</span>
      </a>
</mat-nav-list>

Ошибка Node.js командной строки

ОШИБКА в node_modules /@angular/material/list/list.d.ts:21:22 - ошибка NG6002: появляется в NgModule.imports AppModule, но не может быть разрешена в класс NgModule.

Вероятно, это означает, что библиотека (@ angular / material / list), которая объявляет, что MatNavList некорректно обработан ng cc или несовместима с Angular Ivy. Проверьте, доступна ли более новая версия библиотеки, и обновите, если таковая имеется. Также подумайте о том, чтобы узнать у авторов библиотеки, будет ли библиотека совместима с Ivy.

21 экспорт класса объявления MatNavList extends _MatListMixinBase реализует CanDisable, CanDisableRipple, OnChanges, OnDestroy {

1 Ответ

0 голосов
/ 17 июня 2020

вы должны импортировать list-module в файл app.module.ts и добавить его в импорт: 

import {MatListModule} from '@angular/material/list';

@NgModule({
  declarations: [AppComponent],
  imports: [MatListModule], //add it here
  //rest of your code
...