html 不会从 angular 2 组件内部渲染

Question

我正在使用一项服务根据我所在的页面动态更改 header 中的内容，但是当我将 HTML 放入我的组件时它不会呈现浏览器（参见下面的示例）

home.component.ts

import { Component, OnInit } from '@angular/core';
import { HeaderTitleService } from '../../services/headerTitle.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor(
    private headerTitleService: HeaderTitleService
  ) { }

  ngOnInit() {
    this.headerTitleService.setTitle(`
      We strive to create things
      <br> that are engaging, progressive
      <br> &amp; above all
      <span class="highlight">
      <em>innovative.</em>
      </span>
    `);
  }

}

header.component.ts

import { Component, OnInit } from '@angular/core';
import { HeaderTitleService } from '../../../services/headerTitle.service'

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
  title: any;

  constructor(
    private headerTitleService: HeaderTitleService
  ) { }

  ngOnInit() {
    this.headerTitleService.title.subscribe(updatedTitle => {
      this.title = updatedTitle;
    });
  }

}

header.component.html

<h1>{{title}}</h1>

所以我试图将标题设置为一个字符串，其中包含我想要呈现的 html 标签，但发生的是整个事情以字符串形式出现，而不是它的外观喜欢它我把它放在我的 home.component.html.

我有办法做到这一点吗？？

Answer 1

您可以设置 [innerHtml] 属性

<h1 [innerHtml]="title"></h1>

Example

html 不会从 angular 2 组件内部渲染

html wont render from inside angular 2 component

javascript

typescript

angular