私の問題は、innererHtmlバインディングを使用するとき、angular2がすべてのスタイル属性を削除することです。私にとって重要なのは、タスクの原因です-HTMLはすべてのスタイルでサーバー側で生成されます。例:
@Component({
selector: 'my-app',
template: `
<input type="text" [(ngModel)]="html">
<div [innerHtml]="html">
</div>
`,
})
export class App {
name:string;
html: string;
constructor() {
this.name = 'Angular2'
this.html = "<span style=\"color:red;\">1234</span>";
}
}
しかし、DOMでは1234のみが表示され、このテキストは赤ではありません。
http://plnkr.co/edit/UQJOFMKl9OwMRIJ38U8D?p=preview
ありがとうございました!
DomSanitized
を活用して回避できます。
最も簡単な方法は、次のようなカスタムパイプを作成することです。
import { DomSanitizer } from '@angular/platform-browser'
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
したがって、次のように使用できます。
<div [innerHtml]="html | safeHtml"></div>
必要なインポートを完了することで、yurzuiの例を少し改善しました。
import {DomSanitizer} from '@angular/platform-browser';
import {PipeTransform, Pipe} from "@angular/core";
@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
constructor(private sanitized: DomSanitizer) {}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
}
また、app.module.tsファイルにクラスを追加する必要がありました
import ...
import {SafeHtmlPipe} from "./pipes/safehtml.pipe";
@NgModule({
declarations: [
AppComponent,
...,
SafeHtmlPipe <--
],
imports: [...],
providers: [...],
bootstrap: [AppComponent]
})
export class AppModule {
}
sanitizer
には、trustingコンテンツ用のメソッドがいくつかあります。
return this.sanitizer.bypassSecurityTrustStyle(value);
return this.sanitizer.bypassSecurityTrustHtml(value);
return this.sanitizer.bypassSecurityTrustXxx(value); // - see docs [1]
https://stackoverflow.com/a/41089093/142714 経由
したがって、bypassSecurityTrustStyle
もHTMLコンテンツ内のインラインスタイルを表示するため、ここで必要なものになります(value
)。
[1] docs: https://angular.io/docs/ts/latest/api/platform-browser/index/DomSanitizer-class.html
Angular 2は、より多くの 宣言的アプローチ を目指しているため、HTMLを直接操作します 多くの場合、推奨されません 。
(ほとんど)すべてのHTML操作は、AngularのDOMサニタイズによってフィルタリングされるようにパッチされていると思います。想像できるように、style
属性はspan要素のホワイトリストに登録されていません。実際、現時点では spanには許可された属性はありません です。