Angular 2- innerHTML样式
Angular 2- innerHTML样式
提问于 2016-03-28 23:04:23
我从HTTP调用中得到了HTML代码块。我将HTML块放在一个变量中，并使用innerHTML将其插入到我的页面上，但我无法对插入的HTML块设置样式。有没有人有什么建议可以让我做到这一点？
@Component({
selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers: [HomeService],
styles: [`h3 { color: red; }`]
})我想要样式化的HTML是包含在变量"calendar“中的块。
回答 8
Stack Overflow用户
发布于 2019-09-17 20:02:16
您需要遵循的简单解决方案是
import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer){}
transformYourHtml(htmlTextWithStyle) {
return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}Stack Overflow用户
发布于 2019-10-30 05:33:15
我们经常从我们的内容管理系统中拉入内容作为[innerHTML]="content.title"。我们将必要的类放在应用程序的根styles.scss文件中，而不是放在组件的scss文件中。我们的内容管理系统故意剥离内联样式，所以我们必须准备好作者可以在其内容中使用的类。请记住，在模板中使用{{content.title}}不会从内容中呈现html。
Stack Overflow用户
发布于 2019-02-28 03:38:58
如果您正在尝试对Angular组件中动态添加的HTML元素设置样式，这可能会很有帮助：
// inside component class...
constructor(private hostRef: ElementRef) { }
getContentAttr(): string {
const attrs = this.hostRef.nativeElement.attributes
for (let i = 0, l = attrs.length; i < l; i++) {
if (attrs[i].name.startsWith('_nghost-c')) {
return `_ngcontent-c${attrs[i].name.substring(9)}`
}
}
}
ngAfterViewInit() {
// dynamically add HTML element
dynamicallyAddedHtmlElement.setAttribute(this.getContentAttr(), '')
}我的猜测是，这个属性的约定不能保证在Angular的不同版本之间是稳定的，所以当升级到新版本的Angular时，可能会遇到这个解决方案的问题(尽管在这种情况下，更新这个解决方案可能很简单)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36265026
复制相关文章
相似问题