离子 - 渲染html内容

Question

我只想知道render应用程序中的Ionic html内容如何从相关类的属性中获取内容。

例如，我有以下两个文件......

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage {

    message: String;

    constructor(public navCtrl: NavController) {
        this.message =
            `Below there is a piece of cake for you:<br />
            <img src="http://image.ibb.co/nJVNVS/cake.png" />`;
    }

}

home.html的

<ion-header>
    <ion-navbar>
        <ion-title>Home</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <h2>Welcome to Ionic!</h2>
    <p>
        This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
    </p>
    <p>
        {{message}}
    </p>
</ion-content>

然后，当我运行这个Ionic应用程序时，我得到以下输出：

未渲染图像。相反，它有html标签。

您是否知道如何渲染此图像？

感谢。

Answer 1

如果要在元素中插入HTML，可以将[innerHTML]属性添加到<p>，这会将消息变量的内容呈现为<p>元素内的HTML。

<ion-content padding>
    <h2>Welcome to Ionic!</h2>
    <p>
        This starter project comes with simple tabs-based layout for apps 
        that are going to primarily use a Tabbed UI.
    </p>
    <p [innerHTML]="message"></p>
</ion-content>