Angular 如何使用角度为2/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: '
       <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>) {}
    }

从'@angular/core'导入{Component，OnInit，Input，TemplateRef}；
从“@angular/material”导入{MdDialog，MdDialogConfig，MdDialogRef}；
从“./dialog.component”导入{DialogComponent}；
@组成部分({
选择器：“应用程序内容”，
模板：'
{{“添加按钮”|翻译}
',
样式URL:['./commoncontent.component.css']
})
导出类CommoncontentComponent实现OnInit{
构造函数（公共对话框：MdDialog）{}
恩戈尼尼特（）{
}
开（）{
让config=newMDDialogConfig（）
让dialogRef:MdDialogRef=
this.dialog.open（DialogComponent，config）；
dialogRef.componentInstance.content=“你好”
}
}
从'@angular/core'导入{Component，OnInit，Input，TemplateRef}；
从“@angular/material”导入{MdDialogRef}
从“./commoncontent.component”导入{CommoncontentComponent}
@组成部分({
选择器：“对话框公用”，
模板：'
{{content}}
',
样式URL:['./dialog.component.css']
})
导出类对话框组件{
//@Input（）templateDialog:TemplateRef
内容：字符串；
构造函数（公共dialogRef:MdDialogRef）{}
}

但是我无法通过html。我知道我可以使用ng内容，但我无法使其正常工作。

更新 更新#1 下面的代码块现在更新为最新版本的

@angular/material

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

更新#2 应使用

DomSanitizer#sanitize

而不是

DomSanitizer#bypassSecurityTrustHtml

。（谢谢@binarylobster！）

---

方法1（

管道

） 要传递自定义HTML，只需将带有

htmlContent

的

[innerHtml]=“htmlContent”

属性添加到选择器（例如

span

）作为HTML的净化版本（在本例中为

@Pipe（）

）：

my dialog.component.html

：

我的对话框
关闭对话框

my dialog.component.ts

：

从'@angular/core'导入{Component}；
//这里还有其他进口商品
@组成部分({
选择器：“我的对话框”，
templateUrl:'MyDialog.component.html'
})
导出类MyDialog{
htmlContent:字符串；
}

safehtml.pipe.ts

：

从'@angular/platform browser'导入{domsanizer}；
从“@angular/core”导入{Pipe，PipeTransform，SecurityContext}；
@管道（{name:'safeHtml'}）
导出类SafeHtmlPipe实现PipeTransform{
构造函数（私有dom:domsanizer）{}
转换（值）{
/Note：考虑使用DeMaMixIduleSaTiIZE代替DeMauniZier-yByPaseSturtReTuthTML，它在“标签”中执行代码。
返回this.dom.sanitize（SecurityContext.HTML，value）；
}
}

app.component.ts

（或您希望放置函数的任何位置）：

import{MyDialog}from./my dialog/my dialog.component'；
从“@angular/material/dialog”导入{MatDialog}；
导出类AppComponent{
构造函数（私有对话框：MatDialog）{}
htmlContent:string='内容放在这里
'；
openDialog（）{
让dialogRef=this.dialog.open（MyDialog）；
dialogRef.componentInstance.htmlContent=this.htmlContent；
}
}

然后，在模块文件中声明管道：

@NgModule({
声明：[
//这里还有其他声明
安全管道
]
})
导出类AppModule{}

---

方法2（

domsanizer

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

my dialog.component.html

：

我的对话框
关闭对话框

my dialog.component.ts

：

从'@angular/core'导入{Component，OnInit}；
从“@angular/platform browser”导入{SafeHtml}；
@组成部分({
选择器：“我的对话框”，
templateUrl:“./my dialog.component.html”
})
导出类MyDialog{
htmlContent:字符串；
}

app.component.ts

：

import{MyDialog}from./my dialog/my dialog.component'；
从“@angular/material/dialog”导入{MatDialog}；
从“@angular/platform browser”导入{domsanizer}；
从“@angular/core”导入{SecurityContext}；
// ...
导出类AppComponent{
htmlContent:string='内容放在这里
'；
构造函数（私有对话框：MatDialog，私有dom:DOMSANTIZER）{}
openDialog（）{
让dialogRef=this.dialog.open（MyDialog）；
dialogRef.componentInstance.htmlContent=this.dom.sanitize（SecurityContext.HTML，this.htmlContent）；
}
}

---

使用

如果确实需要对内容进行评估，则只应使用
绕过安全信任HTML
。如果您只是尝试传递简单的html格式，请修改上述示例以使用
this.dom.sanitize（SecurityContext.html，this.htmlContent）
。此外，
sanitize
返回字符串，因此，应该没有理由在对话框组件中将
htmlContent
声明为
SafeHtml
。您好@Edric感谢上述解决方案。但是，如何将完整的html从组件传递到对话框呢。示例：在这种情况下，它仍然有效，但是材质css没有得到应用。@您可以尝试使用
DomPortalHost
或Angular CDK中的门户。谢谢您的提示@binarylobster！我不知道有一种清洁方法。尽管
DomSanitizer
API的描述确实显示：