typescript 在innerHTML angular 2 中注入<input>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38303065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Inject <input> in innerHTML angular 2
提问by Alexy Vercruysse
I am trying to inject a input HTML tag with Angular 2, here is my project :
我正在尝试使用 Angular 2 注入一个输入 HTML 标签，这是我的项目：
<div [innerHTML]="inputpdf"></div>
The .ts :
.ts ：
export class FaxSendComponent {
inputpdf = '<input type="text" name="fname">';
}
Here is the log from the console :
这是来自控制台的日志：
WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).
警告：清理 HTML 会删除一些内容（请参阅 http://g.co/ng/security#xss）。
I try with other html tag like <h3>and it works perfectly.
我尝试使用其他 html 标签<h3>，并且效果很好。
回答by Poul Kruijt
You should trust the HTMLfirst before injecting it. You have to use the DomSanitizerfor such a thing. An <h3>element is considered safe. An <input>element is not.
HTML在注入之前，您应该信任第一个。你必须使用DomSanitizer来做这样的事情。一个<h3>元素被认为是安全的。一个<input>元素不是。
Change your FaxSendComponentto something like this:
将您的更改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){}
}
And have your template stay the same as this:
并让您的模板保持不变：
<div [innerHTML]="inputpdf"></div>
A little heads-up though:
稍微提醒一下：
WARNING: calling this method with untrusted user data exposes your application to XSS security risks!
警告：使用不受信任的用户数据调用此方法会使您的应用程序面临 XSS 安全风险！
If you plan on using this technique more, you can try to write a Pipeto fulfil this task.
如果你打算更多地使用这种技术，你可以尝试编写一个Pipe来完成这个任务。
@Pipe({
name: 'sanitizeHtml'
})
export class SanitizeHtml implements PipeTransform {
constructor(private _sanitizer: DomSanitizer){}
transform(v: string) : SafeHtml {
return this._sanitizer.bypassSecurityTrustHtml(v);
}
}
If you have a pipe like this, your FaxSendComponentwill change to this:
如果您有这样的管道，您FaxSendComponent将更改为：
@Component({
selector: 'fax-send',
template: `<div [innerHTML]="inputpdf | sanitizeHtml"></div>`
})
export class FaxSendComponent {
public inputpdf: string = '<input type="text" name="fname">';
}
回答by Ketan Chaudhari
create sanitizing.ts file when you use it for bind inner html.
当您将其用于绑定内部 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);
}
}
now register this module into your app.module.ts
现在将此模块注册到您的 app.module.ts 中
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 { }
now use when you can bind your html eg. productDetails.html
现在在您可以绑定 html 时使用，例如。产品详情.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>
回答by vjawala
Try using backticks - ` - instead of the single quotes - ' -
尝试使用反引号 - ` - 而不是单引号 - ' -
