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

Question

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

Answer 1

  constructor(
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit() {
  }

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

Answer 2

你可以用谷歌浏览器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;
        }
    `],
})

Answer 3

::ng-deep

https://angular.cn/guide/comp...