MaterialをAngular 2/4で使用してテンプレートダイアログコンポーネントにhtmlを渡すには

Question

Material（MdDialog）を使用して作成したダイアログのテンプレートコンポーネントに、特定のページからカスタムhtmlを渡したいとします。これまでは単純なデータをテンプレートに渡すことができます：

import { Component, OnInit, Input, TemplateRef } from '@angular/core'; 
    import { MdDialog, MdDialogConfig, MdDialogRef } from '@angular/material'; 
    import { DialogComponent } from './dialog.component'; 


    @Component({ 
     selector: 'app-commoncontent', 
     template: ' 
     <div class="row pull-right"> 
     <button md-raised-button (click)="open()" >{{"addButton" | translate}} 
     </button> 
     </div>', 
     styleUrls: ['./commoncontent.component.css'] 
    }) 
    export class CommoncontentComponent implements OnInit { 
     constructor(public dialog : MdDialog) { } 

     ngOnInit() { 
     } 

     open() { 
      let config = new MdDialogConfig() 
      let dialogRef:MdDialogRef<DialogComponent> = 
      this.dialog.open(DialogComponent, config); 
      dialogRef.componentInstance.content = "Hello Angular" 

     } 
    } 

    import { Component, OnInit, Input, TemplateRef } from '@angular/core'; 
    import { MdDialogRef } from '@angular/material' 
    import { CommoncontentComponent } from './commoncontent.component' 

    @Component({ 
     selector: 'dialog-common', 
     template: ' 
     <md-dialog-content class="accent-color"> 
      <form class="form-horizontal" name="dialogForm"> 
       {{content}} 
      </form> 
     </md-dialog-content>', 
     styleUrls: ['./dialog.component.css'] 
    }) 
    export class DialogComponent { 
     //@Input() templateDialog: TemplateRef<any> 
     content:string; 
     constructor(public dialogRef: MdDialogRef<DialogComponent>) {} 
    } 

私はhtmlを渡すことができません。私はそれにng-contentを使うことができますが、それを動作させることはできませんでした。

Answer 1

更新

以下のコードブロックは、現在@angular/material2.0.0-beta.12の最新バージョンに更新されます。

カスタムHTMLを渡す方法の新しい例があり、ここでデータをダイアログに渡す方法が示されています。

---

方法1（Pipe）

単にHTML（この場合、@Pipe()）の消毒バージョンとしてhtmlContentと[innerHtml]="htmlContent"属性を追加し、カスタムHTMLを渡すために（例えばspanなど）セレクタに：

my-dialog.component.html：

<h3 matDialogTitle>My Dialog</h3> 
<mat-dialog-content> 
    <div [innerHtml]="htmlContent | safeHtml"></div> 
</mat-dialog-content> 
<md-dialog-actions> 
    <button md-button matDialogClose>Close Dialog</button> 
</md-dialog-actions> 

my-dialog.component.ts：

import {Component} from '@angular/core'; 
// Other imports here 

@Component({ 
    selector: 'my-dialog', 
    templateUrl: 'my-dialog.component.html' 
}) 
export class MyDialog { 
    htmlContent: string; 
} 

safehtml.pipe.ts：

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

@Pipe({ name: 'safeHtml'}) 
export class SafeHtmlPipe implements PipeTransform { 
    constructor(private dom: DomSanitizer) {} 
    transform(value) { 
     return this.dom.bypassSecurityTrustHtml(value); 
    } 
} 

app.component.ts（あるいは、どこでも機能を配置したいと思います）：

その後

import { MyDialog } from './my-dialog/my-dialog.component'; 
import { MatDialog } from '@angular/material/dialog'; 
export class AppComponent { 
    constructor(private dialog: MatDialog){} 
    htmlContent: string = "<p>Content goes here</p>"; 
    openDialog() { 
     let dialogRef = this.dialog.open(MyDialog); 
     dialogRef.componentInstance.htmlContent = this.htmlContent; 
    } 
} 

、あなたのモジュールファイルにパイプを宣言：

@NgModule({ 

    declarations: [ 
     // Other declarations here 
     SafeHtmlPipe 
    ] 
}) 
export class AppModule {} 

---

方法2（DomSanitizer）

UPDATE：

my-dialog.component.html：

<h3 matDialogTitle>My Dialog</h3> 
<mat-dialog-content> 
    <div [innerHtml]="htmlContent"></div> 
</mat-dialog-content> 
<mat-dialog-actions> 
    <button mat-button matDialogClose>Close Dialog</button> 
</mat-dialog-actions> 

my-dialog.component.ts：

import { Component, OnInit } from '@angular/core'; 
import { SafeHtml } from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-dialog', 
    templateUrl: './my-dialog.component.html' 
}) 
export class MyDialog { 
    htmlContent: SafeHtml; 
} 

次のようにHTMLをサニタイズする別の方法であります：

import { MyDialog } from './my-dialog/my-dialog.component'; 
import { MatDialog } from '@angular/material/dialog'; 
import { DomSanitizer } from '@angular/platform-browser'; 
export class AppComponent { 
    htmlContent: string = "<p>Content goes here</p>"; 
    constructor(private dialog: MatDialog, private dom: DomSanitizer){} 

    openDialog() { 
     let dialogRef = this.dialog.open(MyDialog); 
     dialogRef.componentInstance.htmlContent = this.dom.bypassSecurityTrustHtml(this.htmlContent); 
    } 
} 

Stackblitz demo (showcases both examples)