Angular 7：データバインディングを通じて子コンポーネントに渡される文字列変数内のHTMLタグのエスケープを防止

Question

Angular 7：データバインディングを通じて子コンポーネントに渡される文字列変数内のHTMLタグのエスケープを防止

私のAngular 7アプリでは、文字列変数に一方向のデータバインディングを使用する単純なホームコンポーネントを使用しています（つまり、 [text] = "'Some text'" <�を指定して@Inputを使用して子コンポーネントに変数を渡します。/code> syntax）

リンクなどのHTMLタグを変数に含めて、それを子コンポーネントにレンダリングしたいのですが、アンカータグが原因で以下のコードが失敗します。これを修正するには？

home.component.ts：

{ Component } from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: '
    link'">
    
  ',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {}

card.component.ts：

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-card',
  templateUrl: '
    
{{text}}


  ',
  styleUrls: ['./card.component.css']
})
export class CardComponent {
  @Input() text: string;
}

編集：すみません私はすでに答えを見つけました（下記の私自身の答えを見てください）、私は2日でそれを受け入れます

1

追加された 08 1月 2019 〜で 10:20 著者 aless80 編集された 08 1月 2019 〜で 10:41

ビュー: 19

源

ro nl ru fr es pt de zh hi bn ar

[text] = "{key： 'sdbjvbjhbvsdbv'}" のように試しましたか？

追加された 08 1月 2019 〜で 10:28, 著者 abhishek, 源

6 答え

著者 aless80 · Answer 1 · 2019-01-08T10:25Z

そのやり方を実際に見つけました。まず、私はinnerHTMLを使う必要がありました。

素子：


{{text}}

第二に、いくつかのファンキーな構文。親のHomeコンポーネントでは、href属性とtarget属性に引用符は必要ありません。

著者 aless80 · Answer 2 · 2019-01-08T10:25Z

そのやり方を実際に見つけました。まず、私はinnerHTMLを使う必要がありました。

素子：


{{text}}

第二に、いくつかのファンキーな構文。親のHomeコンポーネントでは、href属性とtarget属性に引用符は必要ありません。

著者 John Velasquez · Answer 3 · 2019-01-08T10:37Z

HTMLをバイパスするには DomSanitizer を使用してください

import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'app-card',
  templateUrl: '
    



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

see stackblitz for complete guide https://stackblitz.com/edit/angular-xeojta?file=src%2Fapp%2Fhello.component.ts

著者 John Velasquez · Answer 4 · 2019-01-08T10:37Z

HTMLをバイパスするには DomSanitizer を使用してください

import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
  selector: 'app-card',
  templateUrl: '
    



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

see stackblitz for complete guide https://stackblitz.com/edit/angular-xeojta?file=src%2Fapp%2Fhello.component.ts

著者 andrea06590 · Answer 5 · 2019-01-08T10:30Z

使用できるリンクには

Angular Docs

大きなhtmlブロックを渡したい場合は、[innerHtml]が必要です。 https://angular.io/guide/template-syntax#property-束縛または補間

https://angular.io/guide/ajs-quick-reference をご覧ください。

著者 Amin · Answer 6 · 2019-01-08T10:40Z

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>