我从HTTP调用中得到了HTML代码块。我将HTML块放在一个变量中,并使用innerHTML将其插入到我的页面上,但我无法对插入的HTML块设置样式。有没有人有什么建议可以让我做到这一点?
@Component({
selector: 'calendar',
template: '<div [innerHTML]="calendar"></div>',
providers: [HomeService],
styles: [`h3 { color: red; }`]
})
我想要样式化的HTML是包含在变量"calendar“中的块。
发布于 2019-09-17 20:02:16
您需要遵循的简单解决方案是
import { DomSanitizer } from '@angular/platform-browser';
constructor(private sanitizer: DomSanitizer){}
transformYourHtml(htmlTextWithStyle) {
return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}
发布于 2019-10-30 05:33:15
我们经常从我们的内容管理系统中拉入内容作为[innerHTML]="content.title"
。我们将必要的类放在应用程序的根styles.scss
文件中,而不是放在组件的scss文件中。我们的内容管理系统故意剥离内联样式,所以我们必须准备好作者可以在其内容中使用的类。请记住,在模板中使用{{content.title}}
不会从内容中呈现html。
发布于 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时,可能会遇到这个解决方案的问题(尽管在这种情况下,更新这个解决方案可能很简单)。
https://stackoverflow.com/questions/36265026
复制相似问题