如何解决 Angular 8 中的“safeHtml 管道不起作用”答案

【问题标题】：How can I resolve "safeHtml pipe not working" in Angular 8如何解决 Angular 8 中的“safeHtml 管道不起作用”
【发布时间】：2019-11-29 20:37:00
【问题描述】：

我必须使用 innerHtml 指令，但它忽略了元素的样式，所以我创建了一个自定义的 safeHtml 管道来渲染元素的 CSS，我使用 innerHtml 将 HTML 元素注入我的 dom。但是点子不起作用。

app.module.ts

import { ViewComponent } from './view/view.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CategoryComponent } from './category/category.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { UserComponent } from './user/user.component';
import { SafeHtmlPipe } from './view/post.pipe';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ViewComponent,
    CategoryComponent,
    AboutComponent,
    ContactComponent,
    UserComponent,
    SafeHtmlPipe
  ],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

post.pipe.ts

import { DomSanitizer } from "@angular/platform-browser";
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "safeHtml" })
export class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {}

  transform(value: string) {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }
}

view.component.ts

import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "app-view",
  templateUrl: "./view.component.html",
  styleUrls: ["./view.component.scss"]
})
export class ViewComponent implements OnInit {
  id: number;
  card = {
    title: `Title here`,
    shortDesc: `Short desc`,
    author: `Author`,
    thumbnail: `Thumbnail URL`,
    datePublished: `date`,
    content: `card content`
  };

  constructor(private route: ActivatedRoute) {}

  showPostContent() {
    document.getElementById("postContent").innerHTML = this.card.content;
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.id = params.id;
    });
    // this.showPostContent();
  }
}

view.component.html

<div [innerHtml]="card.content | safeHtml"></div>

我该如何解决这个问题？

【问题讨论】：

卡片内容的样式是在父组件css中指定的还是内联在卡片内容中？

标签： angular

【解决方案1】：

您应该使用简单的ViewChild()。

HTML：

<div #simpleDiv></div>

组件

import { Component, ViewChild, AfterViewInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit  {
  @ViewChild('simpleDiv', { static: true }) simple;

  ngAfterViewInit() {
    this.simple.nativeElement.innerHTML = 'AAA';
  }
}

stackblitz example

但请注意，很少有正当理由直接在 Angular 中使用 innerHTML。以及您想要实现的任何目标。最有可能以更安全、更“有棱有角”的方式完成。

无论我在现代框架应用程序中的什么地方看到 innerHTML，它几乎总是以一些 Web 开发人员 试图实现某些东西，在他已经知道的工具中，绕过框架，而不是学习如何使用框架正确地做到这一点。

唉，我可能错了。

【讨论】：

样式仅在内联模式下有效，但当给定类时（也在 app.component.css 中定义），它不起作用。我希望注入元素上的定义类能够像 vanilla javascript 中的 DOM 操作一样正常工作。（参考上面的stackblitz）
@YogeshDeveloper 将您的 css 放在 styles.css 文件中。不在应用组件的中
什么都没发生
@YogeshDeveloper 对上面的 stackblitz 做了一点改动：example
问题是样式不再是组件范围的。有没有人找到一个合适的工作解决方案，其中样式在组件范围内照常工作？（css前缀）

【解决方案2】：

关于此innerHTML 中的样式会溢出的问题，请参阅Angular 2 - innerHTML styling 和https://github.com/angular/angular/issues/7845

【讨论】：