Javascript Angular 7：防止通过数据绑定传递给子组件的字符串变量中的HTML标记转义

在Angular 7应用程序中，我有一个简单的主组件，在字符串变量上使用单向数据绑定（即，我使用@Input和

[text]=“'Some text'”

语法将变量传递给子组件）

我希望在变量中包含html标记，如链接，并在子组件中呈现它，但下面的代码由于锚标记而失败。如何解决这个问题

home.component.ts：

{ Component } from '@angular/core';
@Component({
  selector: 'app-home',
  template: '
    <app-card [text]="'Some text and a link: <a href="https://stackoverflow.com" target="_blank">link</a>'">
    </app-card>
  ',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {}

---

我真的找到了方法。首先，我需要对元素使用innerHTML：

<p innerHTML={{text}}>{{text}}</p>

{{{text}

第二，一些时髦的语法。在父主组件中，请注意href和target属性不需要引号：

<app-card [text]="'Some text and a link: <a href=https://stackoverflow.com target=_blank>link</a>'">
</app-card>

”>

编辑：其他用户指向DOMSanitizer，但这迫使我在应用程序组件的typescript部分而不是模板部分写入文本。 正如@John Velasquez在另一个答案中所说，“这个解决方案更可能是一个不能再改变的常数，更可能是一个单向绑定。”

对于可以使用的链接

<a [href]="text">Angular Docs</a>

如果你想传递一个大的html块，你需要[innerHtml]

---

请参阅：

使用domsanizizer绕过html

import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'app-card',
  templateUrl: '
    <p [innerHtml]="result"></p>
  ',
  styleUrls: ['./card.component.css']
})
export class CardComponent implements OnInit {
  @Input() text: string;

  result: any;
  constructor(private sanitized: DomSanitizer) {

  }

  ngOnInit() {
    this.result = this.sanitized.bypassSecurityTrustHtml(this.text);
  }
}

从'@angular/core'导入{Component，Input}；
从“@angular/platform browser”导入{domsanizer}；
@组成部分({
选择器：“应用程序卡”，
templateUrl:'

',
样式URL:['./card.component.css']
})
导出类CardComponent实现OnInit{
@Input（）文本：字符串；
结果：有；
构造器（专用消毒：DOMSanizizer）{
}
恩戈尼尼特（）{
this.result=this.sanitized.bypassSecurityTrustHtml（this.text）；
}
}

有关完整指南，请参见stackblitz

---

尝试使用domsanizizer，下面我给出了一个示例，其中我使用它来清理在iframe src属性中使用的URL，但它还有一个清理HTML的功能：

import { DomSanitizer } from '@angular/platform-browser';
// ... then 
constructor(private sanitizer: DomSanitizer) {
}
// ... then (I used it with url, but it has an html sanitizer)
this.path = this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, 'SOME_URL'));
// ... then in HTML
<iframe [src]="path"></iframe>

从'@angular/platform browser'导入{domsanizer}；
//…那么
构造函数（专用消毒器：DomSanitizer）{
}
//…然后（我将其与url一起使用，但它有一个html消毒剂）
this.path=this.sanitizer.bypassSecurityTrustResourceUrl（this.sanitizer.sanitize（SecurityContext.URL，“SOME_URL”）；
//…然后在HTML中

Angular 2：显示HTML而不进行清理/过滤

1） 创建新文件以保存管道/keep-html.pipe.ts：

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

    @Pipe({ name: 'keepHtml', pure: false })

export class EscapeHtmlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {
  }

  transform(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }
}

2） 在app.module.ts中添加导入语句：

import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
@NgModule({
  declarations: [
    EscapeHtmlPipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

3） 最后，在模板中使用该管道：

<div [innerHTML]="post.body | keepHtml"></div>

---

你试过像这样吗？[text]=“{key:'sdbjvbjhbvsdbv'}”？我不会让你失望的votes@Abhishek谢谢，您提出的解决方案提供了[Object]或者您是否尝试使用

text.key

获取值？谢谢，但我不认为您的方法会有帮助，因为我认为问题在于在我的html模板中编写一个包含所有引号的字符串：“'Some text and a link:'target=“\u blank”>link'”在解决了我的问题后，我想在父模板中使用链接来编写文本，而不是在typescript部分。这是因为在我的真实示例中，我将templateUrl与html文件一起用于这两个组件。@ALES80如果这样做会更好如果您的

文本在运行时可以动态更改，那么您的解决方案更可能是一个无法再更改的常量，更可能是一个单向绑定。但如果它对你有效，那没关系，对我有效。你知道如何在那里显示mat图标吗，比如cloud_下载。它为我显示了“cloud_download”的名称，但没有显示图标，即使我在component.html中使用它时，它工作得很好。在您之前的评论中，您忘记了结束标记中的斜杠：。它是否只显示cloud_download或标签“mat icon”？内部的
{{text}}
确实必要吗？这对我来说很有效：
这很有效！但是，如何将管道应用于div标记内的内容？类似于：
{{myVar|keepHtml}
。所有其他角度管道（如
price
管道）都是这样工作的。谢谢
import { EscapeHtmlPipe } from './pipes/keep-html.pipe';
@NgModule({
  declarations: [
    EscapeHtmlPipe
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

<div [innerHTML]="post.body | keepHtml"></div>