我使用innerHTML在我的组件中呈现HTML内容。但是innerHTML删除HTML内容中的所有属性(例如:删除样式属性)并呈现它。但需要按原样呈现,并且不希望从HTML内容中提取任何属性。是否有任何与innerHTML等效的内容,或者我们是否可以使用innerHTML完成所需的结果。提前致谢。
我的模板文件
<div id="more-info-box" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<div class="clearfix">
<div [innerHTML]="htmlContent" class="long-desc-wrap">
</div>
</div>
</div>
</div>
</div>
</div><!-- End Info box -->
我的组件文件
import { Component } from '@angular/core';
@Component({
selector: 'cr-template-content',
templateUrl: './app/channel.component.html'
})
export class TemplateComponent {
constructor() {
}
htmlContent = '<p>This is my <strong style="color:red">Paragraph</strong></p>'
}
我当前的输出是没有样式属性的内容。但是期望的结果应该是style属性。
你可以直接注入你的组件html。
Plunker链接:
https://plnkr.co/edit/lWR6q8?p=preview
@Component({
selector: 'my-app',
template: `
<div>
<h2 [innerHTML]="htmlContent"></h2>
</div>
`,
})
export class App {
htmlContent:string;
constructor() {
this.htmlContent = `<p>This is my html coontent</p>`
}
}
使用ViewChild。
import {ViewChild,ElementRef,Component} from '@angular/core'
在模板中创建一个局部变量
<div #div ></div>
查询组件类中的局部变量
@Component({...}) class MyComponent {
@ViewChild('div') div:ElementRef;
}
访问任何函数内的native元素
this.div.nativeElement.innerHTML ="something";
而已。 ☺
import { DomSanitizer} from '@angular/platform-browser';
....
htmlContent:any;
constructor(private sanitizer: DomSanitizer){
this.htmlContent = this.sanitizer.bypassSecurityTrustHtml('<p>This is my <strong style="color:red">Paragraph</strong></p>');
}
或者您可以使用https://stackoverflow.com/a/41089093/217408中显示的管道
我认为添加html的最佳方法是创建一个指令:
test.directive.ts:
import { Directive,ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Directive({
selector: '[add-html]'
})
export class TestDirectives{
constructor(el:ElementRef,private sanitizer:DomSanitizer,private elementRef:ElementRef){
this.elementRef.nativeElement.innerHTML ='<h1>Hello World</h1>';
}
}
现在你的指令已经创建了,你将把这个指令添加到你的app.module.ts
中,如下所示:
app.module.ts:
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TestDirectives } from '../directives/test.directive';
@NgModule({
declarations: [
AppComponent,
TestDirectives
],
imports: [],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
你必须在html中使用你的指令,你要添加这个html,如下面的代码所示:
<div add-html></div>
现在看输出。