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

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>

嚴重。

PS：name 是一個變量，如果你想用字符串測試它，試試：

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