web-dev-qa-db-ja.com

Angular2 innerHtmlバインディングはスタイル属性を削除します

私の問題は、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

ありがとうございました！

angularstyles
50
SamProf

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>

プランカーの例

113
yurzui

必要なインポートを完了することで、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 {
}
31
mvermand

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-b​​rowser/index/DomSanitizer-class.html

4
a darren

Angular 2は、より多くの 宣言的アプローチ を目指しているため、HTMLを直接操作します 多くの場合、推奨されません 。

（ほとんど）すべてのHTML操作は、AngularのDOMサニタイズによってフィルタリングされるようにパッチされていると思います。想像できるように、style属性はspan要素のホワイトリストに登録されていません。実際、現時点では spanには許可された属性はありません です。

2
kbtzr