角: innerHTML不采用内联样式

Question

我们有隐私政策文本，大约7000字，我们需要每月不断地改变它。因此，我们将带有内联CSS的HTML插入到数据库中，并使用服务提供它。由于遗留问题，我们无法更改此方法。

从角度上看，我们使用的是：

<div class="col-auto privacy-policy-body"
            [innerHtml]="loginService.userDetails.privacyPolicy?.split('</script>')[1]"></div>

问题是，内联CSS不适用于它。

下面是带有stackblitz链接的示例代码：https://stackblitz.com/edit/angular-inner-html-demo-j53jsf?file=app%2Fapp.component.ts

Answer 1

默认情况下，角将清理插入DOM中的任何值。

可以通过使用DomSanitizer绕过此行为。

示例：

export class AppComponent  {
  rawHtml = '<p> Hello <span style="color: cornflowerblue;">World</span></b></p>';

  trustedHtml = this.sanitizer.bypassSecurityTrustHtml(this.rawHtml);

  constructor(public sanitizer: DomSanitizer) {}
}

StackBlitz例子。

Answer 2

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

  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
  })


  export class AppComponent {
    constructor(public sanitizer: DomSanitizer) {}
    abc:any
    name = 'Angular 5';

    example: string = `<div>this is another div <br/> i want to insert dynamically</div>`;
    test: string =
      '<script type="text/javascript">\n      var m = document.createElement(\'meta\');\n      m.name = \'robots\';\n      m.content = \'noindex, nofollow\';\n      document.head.appendChild(m);\n\n      var g = document.createElement(\'meta\');\n      g.name = \'googlebot\';\n      g.content = \'noindex, nofollow\';\n      document.head.appendChild(g);\n  </script><html>\n    <head>\n        <title>Privacy Policy Pop up text</title>\n        <style>\n            .privacy-policy{\n                font-family: Arial; font-size: 16pt; color: #711984;\n            }\n            .overview{\n                font-family: Arial;\n                font-size: 11pt;\n                color: #711984;\n                font-weight: 600;\n\n            }\n        </style>\n    </head>\n    <body>\n\n     <p class="privacy-policy"><strong>Website Privacy Notice </strong>\n<p style="font-family: Arial; font-size: 12pt" align="left">Last updated May 2021</p>\n<p style="font-family: Arial; font-size: 11pt"> some Text </p>\n  <p style="font-family: Arial; font-size: 11pt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum </p>\n  <p style="font-family: Arial; font-size: 11pt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>\n</body>\n</html>';

      ngOnInit() {
        this.abc=this.sanitizer.bypassSecurityTrustHtml(this.test); 
      }

      
    }

粘贴这个，它就能工作了

在html中

<div [innerHTML] ="abc"></div>