Question

我正在尝试在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标签吗？

Answer 1

您无法使用innerHTML属性呈现组件。相反，请使用与Portal类似的dynamic components。

从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

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

1 个答案: