MatIconModule导入/导出

Question

我正在使用Angular材料进行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 {}

我不再需要Material Cards，所以我在HTML文件中注释声明并导入/导出模块。

我的代码是break。控制台中的错误提示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的句柄呢？

Answer 1

似乎修复了Angular 5。现在，你必须导入MatIconModule。