Question

对于以Angular 2编写的应用程序，我需要将变量中包含的动态html包含到模板中。你可以在这里看到代码：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: '{{name}}',
})
export class AppComponent  { name = '<h2>Angular</h2>'; }

然而，结果不是我想要的：

<h2>Angular</h2>

我想知道是否有一种技术可以包含这个变量来处理标签为html。

Ps：我试试这段代码：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: ' <div innerHTML="name" ></div>',
})

export class AppComponent  { name = '<h2>Angular</h2>'; }

但它并不是我想要的，因为我不希望div（或其他标签）封装<h2>。

Answer 1

如果您不想封装h2，那么您必须写下：

<h2 [innerHTML]="name"></h2>

CRDLY。

PS：name是一个变量，如果你想用字符串测试它，请尝试：

<h2 [innerHTML]="'<b>my html code</b>'"></h2>

在模板中包含包含html的变量 - angular2

1 个答案: