html 不会从 angular 2 组件内部呈现

烟熏道森

我正在使用服务根据我所在的页面动态更改标题中的内容,但是当我将 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;
    });
  }

}

头文件.component.html

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

所以我试图将标题设置为一个字符串,其中包含我想要呈现的 html 标签,但发生的事情是整个事情以字符串的形式出现,而不是我把它放在家里的样子.component.html。

有什么办法可以做到这一点吗??

网络海盗92

你可以设置[innerHtml]属性

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

例子

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Angular2:获取组件内部html元素的引用,然后滚动到该html元素的顶部

来自分类Dev

Angular 2 路由组件无法正确呈现

来自分类Dev

Angular 2动态加载的组件,事件不会触发吗?

来自分类Dev

Angular 组件不呈现 html,显示 html 路由

来自分类Dev

XSLT不会呈现HTML标签

来自分类Dev

螺栓不会呈现HTML吗?

来自分类Dev

组件内的Angular2 HTML

来自分类Dev

Angular app.component.html不呈现新组件

来自分类Dev

检测 Angular2 内部组件的变化?

来自分类Dev

angular cli 不会创建组件

来自分类Dev

Angular 4 导航方法不会在目标组件(ngIf、ngFor)上呈现页面内容

来自分类Dev

在 ANGULAR 中订阅中的数据数组更改后,组件 (AngularMatDataTable) 不会重新呈现?

来自分类Dev

Angular 2:从 Web 服务渲染 Angular html 组件

来自分类Dev

使用数组的映射创建html时,子组件不会立即重新呈现

来自分类Dev

单击按钮后,模态主体不会在 html 中呈现组件

来自分类Dev

Typescript / Angular 2不会将html显示为三元

来自分类Dev

angular2子组件不会在从父组件触发的后续事件上加载

来自分类Dev

Angular 2 - 组件无法正确呈现表格标签

来自分类Dev

API 调用的组件不会呈现

来自分类Dev

html2canvas 不会在左上角呈现图像

来自分类Dev

Angular2:从数组中注入 HTML 并呈现视图

来自分类Dev

Jade不会保留呈现的html的格式

来自分类Dev

Angular2组件不会针对参数化路线重新初始化

来自分类Dev

Angular2组件视图不会在通过方法更改值时更新

来自分类Dev

Angular 2 RC1组件路由不会加载任何内容

来自分类Dev

Angular2组件不会基于数据库的更改而更新

来自分类Dev

Angular 2-具有多个参数的路径不会两次加载其分配的组件

来自分类Dev

具有双向绑定输入的Angular2组件不会触发更改事件

来自分类Dev

Angular2/4 在永远不会被销毁的组件中取消订阅 observable

Related 相关文章

  1. 1

    Angular2:获取组件内部html元素的引用,然后滚动到该html元素的顶部

  2. 2

    Angular 2 路由组件无法正确呈现

  3. 3

    Angular 2动态加载的组件,事件不会触发吗?

  4. 4

    Angular 组件不呈现 html,显示 html 路由

  5. 5

    XSLT不会呈现HTML标签

  6. 6

    螺栓不会呈现HTML吗?

  7. 7

    组件内的Angular2 HTML

  8. 8

    Angular app.component.html不呈现新组件

  9. 9

    检测 Angular2 内部组件的变化?

  10. 10

    angular cli 不会创建组件

  11. 11

    Angular 4 导航方法不会在目标组件(ngIf、ngFor)上呈现页面内容

  12. 12

    在 ANGULAR 中订阅中的数据数组更改后,组件 (AngularMatDataTable) 不会重新呈现?

  13. 13

    Angular 2:从 Web 服务渲染 Angular html 组件

  14. 14

    使用数组的映射创建html时,子组件不会立即重新呈现

  15. 15

    单击按钮后,模态主体不会在 html 中呈现组件

  16. 16

    Typescript / Angular 2不会将html显示为三元

  17. 17

    angular2子组件不会在从父组件触发的后续事件上加载

  18. 18

    Angular 2 - 组件无法正确呈现表格标签

  19. 19

    API 调用的组件不会呈现

  20. 20

    html2canvas 不会在左上角呈现图像

  21. 21

    Angular2:从数组中注入 HTML 并呈现视图

  22. 22

    Jade不会保留呈现的html的格式

  23. 23

    Angular2组件不会针对参数化路线重新初始化

  24. 24

    Angular2组件视图不会在通过方法更改值时更新

  25. 25

    Angular 2 RC1组件路由不会加载任何内容

  26. 26

    Angular2组件不会基于数据库的更改而更新

  27. 27

    Angular 2-具有多个参数的路径不会两次加载其分配的组件

  28. 28

    具有双向绑定输入的Angular2组件不会触发更改事件

  29. 29

    Angular2/4 在永远不会被销毁的组件中取消订阅 observable

热门标签

归档