具有内容的动态创建材料对话框是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

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

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

之后，转到button-component.component.ts和content-component.component.ts文件，并找到 @Component 装饰器，并获得选择器值。在您的情况下，应为app-button-component和app-content-component。

因此，现在您可以在角度项目的任何视图中使用这些值。只需使用 和 ，您就可以指定当您单击自己组件中component.ts文件中的按钮时应该发生的情况应用程序按钮组件。

希望这会有所帮助。