动态创建材质对话框的内容是 Angular 6 中的任何组件

Question

我只是想知道是否有可能创建一个可以生成这些东西的指令：

• 触发器显示对话框的按钮 (1)
• 通过在指令的内容区域内传递一些代码块生成的对话框 (2)

详细来说，在模板文件中会是这样的：

<div popup>
      <div #button><button>Open Popup</button></div> <!-- (1) -->
      <div #content> <!-- (2)  -->
        <user-creation (submitted)="onCreate($event)" [roles$]="roles$"></user-creation>
      </div>
 </div>

Answer 1

您可以创建一个可重复使用的Widget，它是使用一个或多个角度组件构建的。 作为第一步，打开项目目录的终端并创建这两个小部件。

1. 创建你的按钮组件ng g c buttonComponent --module app
2. 创建你的按钮组件ng g c contentComponent --module app

然后转到 button-component.component.ts 和 content-component.component.ts 文件并查找 @Component 装饰器并获取 selector 值。在您的情况下，它应该是 app-button-component 和 app-content-component 。

所以现在您可以在 Angular 项目的任何视图中使用这些值。只需使用 和 你可以指定当你点击你的 component.ts 文件中的按钮时会发生什么应用按钮组件。

希望这会有所帮助。