HTML不会从角度2组件内部渲染 [英] html wont render from inside angular 2 component
问题描述
我正在使用服务根据我所在的页面动态更改标题中的内容,但是当我将HTML放入我的组件时,它不会在浏览器中呈现(参见下面的示例)
I'm using a service to dynamically change the content in my header depending on the page I'm on, however when I put HTML in my component it doesn't render in the browser (see example below)
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> & 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。
so Im trying to set the title to be a string that has html tags in it that I want to be rendered but what happens is the whole thing comes out as a string instead of how it would look like it I had put it in my home.component.html.
是有没有办法可以做到这一点??
Is there a way I can do this??
推荐答案
你可以设置 [innerHtml]
property
You can set the [innerHtml]
property
<h1 [innerHtml]="title"></h1>
这篇关于HTML不会从角度2组件内部渲染的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!