我从HTTP调用中获得了大量的HTML代码。我把HTML块放在一个变量，并将它插入到我的页面[innerHTML]，但我不能样式插入的HTML块。有人有什么建议吗?
@Component({
selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers: [HomeService],
styles: [`h3 { color: red; }`]
})
我想要样式的HTML是包含在变量“日历”中的块。
当前回答
我最初执行this.sanitizer.bypassSecurityTrustHtml()路由，并将封装设置为ViewEncapsulation。没有，但有两个问题:
ViewEncapsulation。NONE在我的组件中引起了其他样式问题 我的“安全”html似乎不工作与css变量，即var(——蓝色)
这对我来说是有效的(不需要更改任何其他内容):InsertAdjacentHTML
模板:
<div id=template></div>
代码:
ngOnInit() {
const el = document.getElementById('template');
el.insertAdjacentHTML('afterbegin', `<span style="color: var(--blue)">hello</span>`);
}
免责声明:在我的例子中，我是从配置文件中解析html。对于用户输入的html，您不会希望走这条路线。
其他回答
对于任何想要对innerHTML应用特定样式的人来说:
创建一个安全的HTML管道
你可以像这样用CSS样式连接你的HTML字符串:
return this.sanitizer.bypassSecurityTrustHtml(value+='<style type="text/css">.image img { width: 100% }</style>');
这个值来自transform(value，…args)
如果动态样式有限，使用内联CSS变量是另一种解决方案。
I.e.
// file.ts
someVarWithHtml = 'Hello <span class="dynamic">World</span>';
// file.ng.html
<div [style]="'--my-var: ' + value"
[innerHTML]="someVarWithHtml"></div>
// style.css
.dynamic {
background: var(--my-var);
}
Günter Zöchbauer推荐的版本很好，但我要做一个补充。在我的例子中，我有一个没有样式的html元素，我不知道如何样式它。因此，我设计了一个管道来添加样式。
import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
@Pipe({
name: 'StyleClass'
})
export class StyleClassPipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(html: any, styleSelector: any, styleValue: any): SafeHtml {
const style = ` style = "${styleSelector}: ${styleValue};"`;
const indexPosition = html.indexOf('>');
const newHtml = [html.slice(0, indexPosition), style, html.slice(indexPosition)].join('');
return this.sanitizer.bypassSecurityTrustHtml(newHtml);
}
}
然后你可以像这样给任何html元素添加样式:
<span [innerhtml]="Variable | StyleClass: 'margin': '0'"> </span>
:
Variable = '<p> Test </p>'
我最初执行this.sanitizer.bypassSecurityTrustHtml()路由，并将封装设置为ViewEncapsulation。没有，但有两个问题:
ViewEncapsulation。NONE在我的组件中引起了其他样式问题 我的“安全”html似乎不工作与css变量，即var(——蓝色)
这对我来说是有效的(不需要更改任何其他内容):InsertAdjacentHTML
模板:
<div id=template></div>
代码:
ngOnInit() {
const el = document.getElementById('template');
el.insertAdjacentHTML('afterbegin', `<span style="color: var(--blue)">hello</span>`);
}
免责声明:在我的例子中，我是从配置文件中解析html。对于用户输入的html，您不会希望走这条路线。
如果你使用sass作为样式预处理器，你可以通过以下方式切换回原生sass编译器:
NPM安装node-sass
这样你就可以继续用/深/来发展。
