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 〜で 08:20

著者 
aless80

編集された 08 1月 2019 〜で 08:41


ビュー: 36

源

 ro
nl
 ru
fr
es
pt
de
hi
bn
ar
 

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

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

源


6 答え


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

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





1

追加された 08 1月 2019 〜で 08:25
著者 aless80



源





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

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





1

追加された 08 1月 2019 〜で 08:25
著者 aless80



源





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


0

追加された 08 1月 2019 〜で 08:37
著者 John Velasquez



源





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


0

追加された 08 1月 2019 〜で 08:37
著者 John Velasquez



源





使用できるリンクには
Angular Docs

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


0

追加された 08 1月 2019 〜で 08:30
著者 andrea06590



源





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>



0

追加された 08 1月 2019 〜で 08:40
著者 Amin



源

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

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

素子：

{{text}}

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

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

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

素子：

{{text}}

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

著者 John Velasquez · Answer 3 · 2019-01-08T08: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-08T08: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-08T08:30Z

使用できるリンクには

Angular Docs

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

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

著者 Amin · Answer 6 · 2019-01-08T08: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>