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

Question

在我的Angular 7应用程序中，我有一个简单的home组件，该组件在字符串变量上使用单向数据绑定（即，我使用@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 {}

card.component.ts：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-card',
  template: '
    <div class="bla bla">
      <p>{{text}}</p>
    </div>
  ',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() text: string;
}

编辑：我写了'templateUrl'，但是那是错误的，我的意思是'template'。让我补充一点，我的真实卡片模板比此处显示的div更复杂，并且我实际上在两个组件中都使用templateUrl，如下所示：

templateUrl: './about.component.html', //in app component

templateUrl: './card.component.html',  //in card component

Answer 1

这是迄今为止最好和最干净的方法

Angular 2：在不清理/过滤的情况下显示 HTML

1）创建新文件来保存管道pipes/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>

荣誉对阿马尔Alakka分享这一解决方案。

Answer 2

我实际上找到了怎么做。首先，我需要将innerHTML用于

元件：

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

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

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

编辑：其他用户指向DOMSanitizer，但这迫使我在应用程序组件的打字稿部分而不是模板部分中编写文本。就像@John Velasquez在另一个答案中说的那样，“解决方案很可能是一个无法更改的常量，它更可能是单向绑定”。

Answer 3

使用DomSanitizer绕过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);
  }
}

请参阅 stackblitz 了解完整指南 https://stackblitz.com/edit/angular-w6qys9