离子 - 呈现 html 内容

Question

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

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

家.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" />`;
    }

}

主页.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>