使用 innerHTML 属性插入时，Angular Material 标签不会呈现为 HTML 标签答案

【问题标题】：Angular Material tags are not rendering as HTML tags when inserted using innerHTML property使用 innerHTML 属性插入时，Angular Material 标签不会呈现为 HTML 标签
【发布时间】：2017-10-24 10:43:28
【问题描述】：

我正在尝试在下面显示使用 Angular 4 中的 "innerHTML" 属性插入的代码。

<div class="type-face">
    <md-card class="mat-card">
        <md-card-content class="mat-card-content">
            <p><strong>Ab</strong> Maison Neue Demi</p>
        </md-card-content>
        <div class="card-footer">Sans-Serif</div>
    </md-card>
</div>

但是，在浏览器中显示的输出只是纯 HTML。

<div class="type-face">
    <p><strong>Ab</strong> Maison Neue Demi</p>
    <p></p>
    <div class="card-footer">Sans-Serif</div>
    <p></p>
</div>

有什么方法可以同时渲染 Angular Material 标签和 HTML 标签？

【问题讨论】：

This may help

标签： angular typescript angular-material2

【解决方案1】：

您不能使用innerHTML 属性呈现组件。而是使用类似于dynamic components 的Portal。

将PortalModule 从@angular/cdk/portal 导入您的应用模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { PortalModule } from '@angular/cdk/portal';
// Other module imports go here

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        PortalModule,
        // Other modules go here
    ]
})
export class AppModule {}

将此 HTML 放在一个组件中，并将其导入您应用的模块以及 entryComponents 数组中。

exampletemplate.component.html:

<div class="type-face">
    <md-card class="mat-card">
        <md-card-content class="mat-card-content">
            <p><strong>Ab</strong> Maison Neue Demi</p>
        </md-card-content>
        <div class="card-footer">Sans-Serif</div>
    </md-card>
</div>

exampletemplate.component.ts

@Component({
    selector: 'template-example',
    templateUrl: './exampletemplate.component.html'
})
export class ExampleTemplateComponent {}

app.module.ts

@NgModule({
    declarations: [
        ExampleTemplateComponent
    ],
    entryComponents: [
        ExampleTemplateComponent
    ]
})

将ng-template 指令添加到您希望动态内容所在的任何位置。添加属性[cdkPortalHost] 并将其绑定到组件打字稿中的属性（在本例中为exampleHost）。
```
<ng-template [cdkPortalHost]="exampleHost"></ng-template>
```

在您的组件打字稿中，将门户主机初始化为使用ComponentPortal<any> 类型，@angular/cdk/portal 也提供该类型，并可能添加一个函数来设置它：

import { ComponentPortal } from '@angular/cdk/portal';
import { ExampleTemplateComponent } from './path/to/exampletemplate.component';
// Other imports go here

export class AppComponent implements OnInit {
    exampleHost: ComponentPortal<any>;
    ngOnInit() {
        this.exampleHost = new ComponentPortal(ExampleTemplateComponent);
    }
}

Stackblitz Demo

【讨论】：