代码之家 › 专栏 › 技术社区 › aless80

角度7:防止在通过数据绑定传递给子组件的字符串变量中转义HTML标记

angular html javascript

-2

aless80 · 技术社区 · 7 年前

在Angular7应用程序中,我有一个简单的主组件,它使用字符串变量上的单向数据绑定(即,我使用@input将变量传递给子组件 [text]="'Some text'" 语法)。

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

主页.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 {}

卡.组件.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

4 回复 | 直到 7 年前

1

andrea06590 7 年前

对于可以使用的链接

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

如果要传递一个大的HTML块,则需要[innerhtml] https://angular.io/guide/template-syntax#property-binding-or-interpolation

见: https://angular.io/guide/ajs-quick-reference

2

1

Amin 7 年前

尝试使用domSanitizer,下面我给出了一个示例,我使用它来清理在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>

3

1

John Velasquez 7 年前

使用 多杀菌剂 绕过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

4

0

aless80 7 年前

我真的找到了怎么做。首先,我需要使用innerhtml

元素:

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

第二,一些时髦的语法。在父级主组件中,请注意,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在另一个答案中所说,这个解决方案更像是一个不能再改变的常量,更像是一个单向绑定。