Question

我按照本指南为我的项目设置材料。这个想法是创建一个共享模块以在整个应用程序中重复使用-https://material.angular.io/guide/getting-started

创建的material.module.ts

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

import { OverlayModule } from '@angular/cdk/overlay';
import { DragDropModule } from '@angular/cdk/drag-drop';

@NgModule({
    imports: [
        MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatGridListModule,
    MatFormFieldModule,
    MatInputModule,
    MatStepperModule,
    MatSelectModule,
    ........
    ],
    exports: [
    MatToolbarModule,
    MatButtonModule,
    MatSidenavModule,
    MatIconModule,
    MatListModule,
    MatMenuModule,
    MatGridListModule,
    MatFormFieldModule,
    MatInputModule,
    MatStepperModule,
    MatSelectModule,
    ......

    ]
})
export class MaterialModule { }

修改后的app.module.ts

import { MaterialModule } from './material.module';

和

imports: [
    MaterialModule,

然后我创建了一个对话框组件用户垫设计：

alert.component.ts

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
//tried with and without the following line just incase
import {MaterialModule} from '../../../../material.module';

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

  imports: [
    CommonModule,
    MaterialModule
  ]
})
export class AlertComponent {
  constructor(
    @Inject(MAT_DIALOG_DATA)
    public data: ModalAlertData
  ) { }

  getAlertIcon() {
    switch (this.data.alertType) {
      case AlertType.INFO:
        return 'info';
      case AlertType.WARNING:
        return 'warning';
      case AlertType.ERROR:
        return 'error';
    }
  }
}

export class ModalAlertData {
  title: string;
  content: string;
  alertType: AlertType;
  closeButtonLabel: string;

  constructor(data?) {
    if (data) {
      this.title = data.title;
      this.content = data.content;
      this.alertType = data.alertType;
      this.closeButtonLabel = data.closeButtonLabel;
    }
  }
}

export enum AlertType {
  INFO, WARNING, ERROR
}

alert.component.html

<h2 mat-dialog-title>{{ data.title }}</h2>
<mat-dialog-content>
  <div>
    <mat-icon>{{ getAlertIcon() }}</mat-icon>
    {{ data.content }}
  </div>
</mat-dialog-content>
<mat-divider></mat-divider>
<mat-dialog-actions align="center">
  <button mat-raised-button color="primary" [mat-dialog-close]="data.title">
    {{ data.closeButtonLabel }}
  </button>
</mat-dialog-actions>

我收到此运行时错误

Uncaught Error: Template parse errors:
'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. ("
<mat-dialog-content>
  <div>
    [ERROR ->]<mat-icon>{{ getAlertIcon() }}</mat-icon>
    {{ data.content }}
  </div>
"): ng:///ComponentModule/AlertComponent.html@3:4
'mat-dialog-content' is not a known element:
1. If 'mat-dialog-content' is an Angular component, then verify that it is part of this module.
2. If 'mat-dialog-content' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<h2 mat-dialog-title>{{ data.title }}</h2>
[ERROR ->]<mat-dialog-content>
  <div>

Answer 1

尝试在您的app.component中添加entryComponents: [AlertComponent ]。如果不起作用，请在stackblitz上共享您的代码

无法识别共享材料模块

1 个答案: