Динамическое создание материалов Диалог с содержимым любого компонента в 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 в вашем app-button-component .

Надеюсь, это поможет.