ViewEncapsulation.None 不适用于 innerHTML答案

【问题标题】：ViewEncapsulation.None not working with innertHTMLViewEncapsulation.None 不适用于 innerHTML
【发布时间】：2020-06-09 23:55:33
【问题描述】：

我实际上正在开发一个角度应用程序，我必须将一个 [innerHTML] 元素放在一个 div 中。

我的代码
像这样：
something.component.html

<section class="mx-auto" *ngFor="let publication of publication">
  <div [innerHTML]="publication.content"></div>
</section>

所以在 ts 中：
something.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import { Title, Meta } from '@angular/platform-browser';

import { Publication } from '../publication.model';
import { PublicationsService } from '../publication.service';

@Component({
  selector: 'app-free-publication',
  templateUrl: './something.component.html',
  styleUrls: ['./something.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class FreePublicationComponent implements OnInit {
  publication: Publication[] = [];
  suggestions: Publication[] = [];
  private routeSub: Subscription;
  getId: any;
  isLoading = false;

  constructor(public publicationsService: PublicationsService, private route: ActivatedRoute, private titleService: Title, private meta: Meta) {
    this.getId = this.route.url['_value'][1].path;
    this.getId = + this.getId;
  }

  ngOnInit() {
    this.isLoading = true;
    // main publication
    this.routeSub = this.route.params.subscribe(params => {
      this.publicationsService.getPublication(params['publicationId']).then(dataPublication => {
        for (let i = 0; (dataPublication.content.match(/wp-content/g) || []).length; i++) {
          dataPublication.content = dataPublication.content.replace('https://aurelienbamde.com/wp-content/', 'assets/content/');
        }
        this.titleService.setTitle(dataPublication.title);
        this.meta.addTag({ name: 'keywords', content: dataPublication.post_tag });
        this.publication = [dataPublication];
      });
    });
  }
}

而且我的 innertHTML 不会返回我发送的 html 文档的样式。

我的测试
使用 ngOnInit 末尾的 console.log()，我可以看到我的 html 包含所有样式属性，但是通过检查 innerHTML 的 div，里面没有样式。

我的问题
所以我很好地实现了ViewEncapsulation.None，正如你所看到的，对其他元素有一个操作，所以它有效，但不适用于我的 innerHTML。
你有什么想法，版本问题？还是与其他元素合作？

提前感谢您的宝贵时间！
祝你在项目中取得成功。

【问题讨论】：

标签： html css angular typescript innerhtml

【解决方案1】：

您必须绕过 Angular 对危险内容（不是应用程序生成的 HTML 内容）施加的安全性。有一项名为DomSanitizer 的服务使您能够将内容声明为安全的，从而防止 Angular 过滤要使用的可能有害的东西，例如样式、类、标签等。您基本上需要使用管道通过此消毒剂传递您的内容：

<div [innerHTML]="dangerousContent | safeHtml"></div>

您的SafeHtmlPipe 会是这样的：

@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {

  constructor(protected sanitizer: DomSanitizer) {}

  transform(value: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(value)
  }
}

DomSanitizer中还有其他bypassSecurityTrust*方法：

绕过SecurityTrustScript
绕过SecurityTrustStyle
绕过SecurityTrustUrl
绕过SecurityTrustResourceUrl

您可以在Angular docs找到更多信息。

【讨论】：