を注入<input>私は、角2で入力HTMLタグを挿入しようとしていた角度2

Question

は、ここに私のプロジェクトは次のとおりです。

<div [innerHTML]="inputpdf"></div> 

.TSは：ここでは

export class FaxSendComponent { 
    inputpdf = '<input type="text" name="fname">'; 
    } 

はからのログですコンソール：

WARNING：HTMLは、いくつかのコンテンツを剥奪消毒（ http://g.co/ng/security#xssを参照してください）。

<h3>のような他のhtmlタグで試してみてください。完全に動作します。

Answer 1

あなたはそれを注入する前にHTML最初のを信用すべきです。そのようなことにはDomSanitizerを使用する必要があります。 <h3>要素は安全とみなされます。 <input>要素はありません。

このような何かにあなたの FaxSendComponentを変更

：

export class FaxSendComponent { 

    private _inputpdf: string = '<input type="text" name="fname">'; 

    public get inputpdf() : SafeHtml { 
     return this._sanitizer.bypassSecurityTrustHtml(this._inputpdf); 
    } 

    constructor(private _sanitizer: DomSanitizer){} 
} 

そして、あなたのテンプレートは、このように同じままあります

<div [innerHTML]="inputpdf"></div> 

少しヘッドアップかかわら：

WARNING ：信頼できないユーザーデータでこのメソッドを呼び出すと、アプリケーションがXSSセキュリティリスクにさらされます。

このテクニックをさらに使用する予定の場合は、Pipeと記述してこのタスクを実行してください。

@Pipe({ 
    name: 'sanitizeHtml' 
}) 
export class SanitizeHtml implements PipeTransform { 

    constructor(private _sanitizer: DomSanitizer){} 

    transform(v: string) : SafeHtml { 
     return this._sanitizer.bypassSecurityTrustHtml(v); 
    } 
} 

あなたは、このようなパイプを持っている場合は、あなたのFaxSendComponentはこれに変更されます。

@Component({ 
    selector: 'fax-send', 
    template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>` 
}) 
export class FaxSendComponent { 

    public inputpdf: string = '<input type="text" name="fname">'; 

} 

Answer 2

は、バッククォートを使用してみてください - ` - 代わりに単一引用符で - ' -

Answer 3

をバインド内部HTMLのためにそれを使用するときsanitizing.tsファイルを作成します。今

import { Pipe, PipeTransform } from "@angular/core"; 
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; 

@Pipe({ 
    name: 'sanitizeHtml' 
}) 
export class SanitizeHtmlPipe implements PipeTransform { 

    constructor(private _sanitizer:DomSanitizer) { 
    } 

    transform(v:string):SafeHtml { 
    return this._sanitizer.bypassSecurityTrustHtml(v); 
    } 
} 

ごapp.module.tsあなたのhtmlなどをバインドすることができたときに、今使っ

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { routes } from './app.routing'; 

import { SanitizeHtmlPipe } from './product_details/filter'; 

@NgModule({ 
    declarations: [ 
    SanitizeHtmlPipe 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    BrowserAnimationsModule, 
    CookieLawModule, 
    routes 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

にこのモジュールを登録します。 productDetails.html

<section class="multiple-img"> 
    <div class="container" *ngIf="product_details"> 
    <div class="row"> 
     <h1 class="main-titel-text">Detail</h1> 
    </div> 
    <div class="row"> 
     <div class="col-md-3 col-sm-3 col-xs-12"> 
     <div class="product-box-div"> 
      <div class="product-img-div"> 
      <img src="{{image_url.product_images}}{{product_details.product_image}}" alt="Product"/> 
      </div> 
      <div class="product-name-div">Name:- {{ product_details.product_name }}</div> 
      <div class="product-name-div">Price:- {{ product_details.product_price }}</div> 
      <div class="product-name-div">Selling Price:- {{ product_details.product_discount_price }}</div> 
      <div class="product-name-div" [innerHTML]="product_details.product_description | sanitizeHtml"></div> 
     </div> 
     </div> 
    </div> 
    </div> 
</section>