Angular 我如何解决；“安全管道不工作”；角度8

我必须使用innerHtml指令，但它忽略了元素的样式，因此我创建了一个自定义的

safeHtml

管道来呈现元素的CSS。基本上，我使用

innerHtml

将HTML元素注入我的dom。但是pip不起作用

应用程序模块.ts

从'./view/view.component'导入{ViewComponent}；
从“@angular/platform browser”导入{BrowserModule}；
从“@angular/core”导入{NgModule}；
从“./app routing.module”导入{AppRoutingModule}；
从“./app.component”导入{AppComponent}；
从“./home/home.component”导入{HomeComponent}；
从“./category/category.component”导入{CategoryComponent}；
从“./about/about.component”导入{AboutComponent}；
从“./contact/contact.component”导入{ContactComponent}；
从“./user/user.component”导入{UserComponent}；
从“./view/post.pipe”导入{SafeHtmlPipe}；
@NGD模块({
声明：[
应用组件，
HomeComponent，
视图组件，
类别成分，
关于组件，
联系人组件，
用户组件，
安全管道
],
导入：[BrowserModule，AppRoutingModule]，
提供者：[]，
引导：[AppComponent]
})
导出类AppModule{}

post.pipe.ts

从“@angular/platform browser”导入{domsanizer}”；
从“@angular/core”导入{Pipe，PipeTransform}；
@管道（{name:“safeHtml”}）
导出类SafeHtmlPipe实现PipeTransform{
构造函数（私有消毒：domsanizizer）{}
转换（值：字符串）{
返回此.sanitized.bypassSecurityTrustHtml（值）；
}
}

查看.component.ts

从“@angular/core”导入{Component，OnInit}；
从“@angular/router”导入{ActivatedRoute}”；
@组成部分({
选择器：“应用程序视图”，
templateUrl:“./view.component.html”，
样式URL:[“/view.component.scss”]
})
导出类ViewComponent实现OnInit{
id：编号；
卡片={
title:`title here`，
shortDesc:`Short desc`，
作者：`author`，
缩略图：`缩略图URL`，
datePublished:`date`，
内容：`卡片内容`
};
构造函数（专用路由：ActivatedRoute）{}
showPostContent（）{
document.getElementById（“postContent”）.innerHTML=this.card.content；
}
恩戈尼尼特（）{
this.route.params.subscribe（params=>{
this.id=params.id；
});
//this.showPostContent（）；
}
}

view.component.html

---

如何解决此问题？

您应该使用一个简单的

ViewChild（）

HTML：

<div #simpleDiv></div>

但是请注意，在angular中直接使用innerHTML的合法理由很少。不管你想做什么。最有可能以一种更安全、更“狭隘”的方式完成

无论我在现代框架应用程序中看到什么innerHTML，它几乎总是以一些web开发人员的身份结束，他们试图通过自己已经知道的工具在框架中实现一些东西，而不是学习如何正确使用框架

---

唉，我可能错了。

关于这个

innerHTML

中的样式将溢出的问题，请参见和样式仅在内联模式下工作，但当给定类（在app.component.css中定义）时，它也不工作。我希望在注入的元素上定义的类能够像香草javascript中的DOM操作一样正常工作。（参考上面的stackblitz）@YogeshDeveloper将您的css放在

style.css

文件中。不在应用程序组件的任何内容中happened@YogeshDeveloper改变了一点stackblitz：问题是样式不再是组件范围。是否有人找到了一个合适的工作解决方案，在组件范围内，样式照常工作？（css前缀）是在父组件css中指定的卡片内容样式，还是在卡片内容中内联？

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';
  }
}