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
[text] = "{key: 'sdbjvbjhbvsdbv'}" のように試しましたか?
追加された 著者 abhishek,

6 答え

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

素子:


{{text}}

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



1
追加された

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

素子:


{{text}}

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



1
追加された

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
追加された

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
追加された

使用できるリンクには

Angular Docs

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

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

0
追加された

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
追加された
Angular - 日本のコミュニティ [ja]
Angular - 日本のコミュニティ [ja]
3 参加者の

このグループではAngularについて話します。 パートナー:kotaeta.com

JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript