2

データ バインディングを維持しながら、innerHtml にバインドしようとしています。これは機能しません (出力 {{myVar}})。

@Component({
  selector: "test",
  template: `
    <div [innerHtml]="myHtml"></div>
  `,
})
export class TestComponent{
  title = "My Title";
  myHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer){
    this.myHtml = sanitizer.bypassSecurityTrustHtml("<h1>{{title}}</h1>");
  }
}

私の実際のアプリでは、myHtml は SVG ファイルのコンテンツであり (これが必要な理由ですbypassSecurityTrustHtml)、頻繁に変更されるため、テンプレートに配置できません (20 の異なる SVG ファイルから取得される可能性があります)。

コンポーネントの templateUrl を動的に設定する方法があれば、それも私の問題を解決しますが、かなり長い間検索した後では不可能のようです。

4

1 に答える 1

3

Angular2 は動的に追加された HTML を処理しないため{{}}、[]、()、 ... は動作しないはずです。また、この方法で追加された HTML がそれらのセレクターと一致する場合でも、コンポーネントやディレクティブは作成されません。

コンポーネント テンプレートに静的に追加されたマークアップのみが処理されます。

Angular 2 の $compile に相当するものは、本当に必要な場合のアプローチを示しています。

于 2016-10-27T08:50:17.717 に答える