Как я могу решить "труба safeHtml не работает" в Angular 8

Question

Я должен использовать директиву innerHtml, но она игнорирует стилизацию элементов, поэтому я создал пользовательский канал safeHtml для визуализации CSS элемента в основном, я внедряю элементы HTML в мой домен, используя innerHtml.Но пункт не работает.

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>

Как я могу решить эту проблему?

Answer 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

Имейте в виду, однако, что очень мало законных причин для использования innerHTML непосредственно в angular.и чего бы ты ни пытался достичь.Скорее всего, это можно сделать более безопасным, «угловатым» способом.

везде, где я вижу innerHTML в современном фреймворковом приложении, он почти всегда оказывается неким веб-разработчиком , который пытается достичьчто-то, в инструментах, которые он уже знает, обходя фреймворк, вместо того, чтобы научиться делать это правильно с помощью фреймворка.

Увы, я могу ошибаться.