angular中使用【innerHTML】插入dom之后,发现在.css中设置改dom的样式失效

lzhsmall
  • 42

angular中使用【innerHTML】插入dom之后,发现在.css中设置改dom的样式失效,只能在插入后面使用js来设置样式,为什么

回复
阅读 2.9k
3 个回答
Donle
  • 1.4k
scherman
  • 3.8k

你可以用谷歌浏览器F12或者查看元素功能,检查为何css设置没有生效。一般来说,是因为angular给css的class加入前缀导致,只需要页面组件ts上的component注解中加入encapsulation: ViewEncapsulation.None,就可以避免angular给class加前缀。

@Component({
    selector: 'xxxxxxxxxxxxxx',
    template: '<div></div>',
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .npf-pdf-modal .modal-lg {
            max-width: 1000px;
            max-height:800px;
        }
    `],
})
  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
  }

  load(html: string) {
    const safeHtml = this.sanitizer.bypassSecurityTrustHtml(html);
    this.htmlTpl = safeHtml;
  }
宣传栏