如何在引导箱对话框中添加自定义 angular 4 组件？答案

【问题标题】：How to add custom angular 4 components in a bootbox dialog?如何在引导箱对话框中添加自定义 angular 4 组件？
【发布时间】：2017-09-12 19:06:58
【问题描述】：

我正在尝试在引导框对话框中显示一些用户信息。我需要在对话框中显示一个自定义组件。

var dialog = bootbox.dialog({
   title: 'User Information Table',
   message: `<div class="myclass"><app-charts></app-charts></div>`,
   buttons: {
  cancel: {
    label: "Cancel!",
    className: 'btn-danger',
      callback: function(){

  }
})

模板未编译，因此在引导箱中显示为普通标签。有没有办法在 bootbox 对话框中显示一个 angular 4 组件？

【问题讨论】：

您在哪里使用此代码？你可以访问 DOM 元素吗？
@AngularInDepth.com 我认为是的。他可以访问 DOM 元素 bootboxjs.com/…
此代码是显示用户表的不同组件的一部分。我确实可以访问 DOM 元素。是的。
你可以利用动态组件，你可以将一个DOM元素传递给create方法

标签： angular bootbox

【解决方案1】：

据我所知，Bootbox 不会这样做。我使用MatDialog 来创建带有自定义组件的对话框。看看吧：

https://material.angular.io/components/dialog/overview

【讨论】：