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

Question

我想将自定义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: '
       <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

更新

更新#1

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

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

更新#2

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

方法1(Pipe)

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

my-dialog.component.html:

<h3 matDialogTitle>My Dialog</h3>
<mat-dialog-content>
  <div [innerHtml]="htmlContent | safeHtml"></div>
</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button matDialogClose>Close Dialog</button>
</mat-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, 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 `<script>` tags
    return this.dom.sanitize(SecurityContext.HTML, 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)

更新:清理HTML的另一种方法如下:

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

app.component.ts:

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 = '<p>Content goes here</p>';
  constructor(private dialog: MatDialog, private dom: DomSanitizer){}

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

Stackblitz演示(展示两个例子)