我正在使用 Angular Material 开发 Angular 4 项目。
我有这个屏幕,其中我曾经有材质卡和材质图标。
我只是处理 MatCardModule 的导入/导出。卡已显示,正常。我添加了一个材质图标。图标也显示,但我不处理 MatIconModule 的导入/导出。
这是一个笨蛋:https://plnkr.co/edit/UOxDkqmWjg0uu5QNrl7c?p=preview
main.ts 文件:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {MatCardModule} from '@angular/material';
import {CardOverviewExample} from './card-overview-example';
@NgModule({
declarations: [CardOverviewExample],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatCardModule
],
exports: [
MatCardModule
],
bootstrap: [CardOverviewExample]
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
card-overview-example.ts 文件:
import {Component} from '@angular/core';
@Component({
selector: 'card-overview-example',
template: `
<mat-card>Simple card</mat-card>
<mat-icon class="material-icons" aria-hidden="true">
important_devices
</mat-icon>
`
})
export class CardOverviewExample {}
我不再需要材料卡,所以我评论了 HTML 文件中的声明以及模块的导入/导出。
我的代码被破坏了。控制台中的错误表明 mat-icon 不是已知元素。
这是一个笨蛋:https://plnkr.co/edit/UvhxpOkOWhaMKX2tkb7A?p=preview
main.ts 文件:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
//import {MatCardModule} from '@angular/material';
import {CardOverviewExample} from './card-overview-example';
@NgModule({
declarations: [CardOverviewExample],
imports: [
BrowserModule,
BrowserAnimationsModule,
//MatCardModule
],
exports: [
//MatCardModule
],
bootstrap: [CardOverviewExample]
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
card-overview-example.ts 文件:
import {Component} from '@angular/core';
@Component({
selector: 'card-overview-example',
template: `
<!-- <mat-card>Simple card</mat-card> -->
<mat-icon class="material-icons" aria-hidden="true">
important_devices
</mat-icon>
`
})
export class CardOverviewExample {}
是的,当然。如果我处理 MatIconModule 的导入/导出,图标就会显示出来,很好。
这是一个笨蛋:https://plnkr.co/edit/Mn12NIuES35G2xOB0CrA?p=preview
main.ts 文件:
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NgModule} from '@angular/core';
import {MatIconModule} from '@angular/material';
import {CardOverviewExample} from './card-overview-example';
@NgModule({
declarations: [CardOverviewExample],
imports: [
BrowserModule,
BrowserAnimationsModule,
MatIconModule
],
exports: [
MatIconModule
],
bootstrap: [CardOverviewExample]
})
export class PlunkerAppModule {}
platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
card-overview-example.ts 文件:
import {Component} from '@angular/core';
@Component({
selector: 'card-overview-example',
template: `
<!-- <mat-card>Simple card</mat-card> -->
<mat-icon class="material-icons" aria-hidden="true">
important_devices
</mat-icon>
`
})
export class CardOverviewExample {}
但是为什么我在使用 MatCardModule 时不需要导入/导出 MatIconModule 的句柄?
似乎已在 Angular 5 中修复。现在,您必须导入 MatIconModule。