如何使用带有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的清理版本（在本例中为@Pipe()）添加到选择器（例如{{1} }}）：

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

方法2（@NgModule({ declarations: [ // Other declarations here SafeHtmlPipe ] }) export class AppModule {} ）

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

DomSanitizer：

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

Stackblitz demo (showcases both examples)