如何使用带有Angular2/4的材质将html传递给模板对话框组件

我想将自定义html从特定页面传递到模板组件,以便使用Material(MdDialog)创建对话框.直到现在我可以将简单数据传递给模板,如下所示:

    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: '
       

         {{"addButton" | translate}}
         
       
',
      styleUrls: ['./commoncontent.component.css']
    })
    export class CommoncontentComponent implements OnInit {
      constructor(public dialog : MdDialog) { }

      ngOnInit() {
      }

      open() {
          let cOnfig= new MdDialogConfig()
          let dialogRef:MdDialogRef = 
          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: '
         
             
                {{content}} 
             
         ',
       styleUrls: ['./dialog.component.css']
    })
    export class DialogComponent {
      //@Input() templateDialog: TemplateRef
      content:string;
      constructor(public dialogRef: MdDialogRef) {}
    }

但我无法传递HTML.我知道我可以使用ng-content,但我无法使其工作.

更新#1

以下代码块现在更新为最新版本@angular/material.

还有一个关于如何传递自定义HTML的新示例,它现在显示了如何将数据传递到对话框.

更新#2

DomSanitizer#sanitize应该用来代替DomSanitizer#bypassSecurityTrustHtml.(谢谢@binarylobster!)

要传递自定义HTML,只需将一个[innerHtml]="htmlContent"属性htmlContent作为HTML的清理版本(在本例中为a @Pipe())添加到选择器(例如span):

my-dialog.component.html:

My Dialog

  



  Close Dialog

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

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

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

@Pipe({ name: 'safeHtml'})
export class SafeHtmlPipe implements PipeTransform {
  constructor(private dom: DomSanitizer) {}
  transform(value) {
    // NOTE: Consider using DomSanitizer#sanitize instead of DomSanitizer#bypassSecurityTrustHtml, which executes code in `` tags
    return this.dom.sanitize(SecurityContext.HTML, value);
  }
}

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

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

My Dialog

  



  Close Dialog

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: string;
}

import { MyDialog } from './my-dialog/my-dialog.component';
import { MatDialog } from '@angular/material/dialog';
import { DomSanitizer } from '@angular/platform-browser';
import { SecurityContext } from '@angular/core';

// ...
export class AppComponent {
  htmlContent: string = '
Content goes here
';
  constructor(private dialog: MatDialog, private dom: DomSanitizer){}

  openDialog() {
    let dialogRef = this.dialog.open(MyDialog);
    dialogRef.componentInstance.htmlCOntent= this.dom.sanitize(SecurityContext.HTML, this.htmlContent);
  }
}