我从HTTP调用中获得了大量的HTML代码。我把HTML块放在一个变量,并将它插入到我的页面[innerHTML],但我不能样式插入的HTML块。有人有什么建议吗?

@Component({
  selector: 'calendar',
  template: '<div [innerHTML]="calendar"></div>',
  providers: [HomeService], 
  styles: [`h3 { color: red; }`]
})

我想要样式的HTML是包含在变量“日历”中的块。


当前回答

如果动态样式有限,使用内联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);
}

其他回答

我们经常从我们的CMS中提取内容作为[innerHTML]="content.title"。我们将必要的类放在应用程序的根样式中。SCSS文件而不是组件的SCSS文件。我们的CMS特意剥离了内联样式,所以我们必须准备好作者可以在其内容中使用的类。记住使用{{content。模板中的Title}}不会从内容中呈现HTML。

如果你使用sass作为样式预处理器,你可以通过以下方式切换回原生sass编译器:

NPM安装node-sass

这样你就可以继续用/深/来发展。

你需要遵循的简单解决方案是

import { DomSanitizer } from '@angular/platform-browser';

constructor(private sanitizer: DomSanitizer){}

transformYourHtml(htmlTextWithStyle) {
    return this.sanitizer.bypassSecurityTrustHtml(htmlTextWithStyle);
}

对于任何想要对innerHTML应用特定样式的人来说:

创建一个安全的HTML管道

你可以像这样用CSS样式连接你的HTML字符串:

return this.sanitizer.bypassSecurityTrustHtml(value+='<style type="text/css">.image img { width: 100% }</style>');

这个值来自transform(value,…args)

如果你想在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时,这个解决方案可能会遇到问题(尽管,在这种情况下,更新这个解决方案可能是微不足道的)。