избегайте создания компонентов оболочки диалога в angular

Я использую угловой материал для открытия диалогов. У меня есть много компонентов, которые становятся открытыми в диалогах, но с точки зрения хорошего разделения проблем я хочу избежать запекания поведения диалога в компоненте. У меня есть диалоговое окно панели вызова компонента-оболочки, которое имеет область ng-content и предоставляет некоторые базовые функции и стили.

Я хотел бы иметь возможность сделать что-то подобное, как я мог бы сделать с tsx/react;

const dialogComp = `<app-dashboard-dialog><app-create-user-form (create)="handleCreate()" cancel="handleCancel()"></app-create-user-form></app-dashboard-dialog>`
this.dialog.open(dialogComp, { ... });

Есть ли что-нибудь подобное, что будет работать с mat-dialog? Как избежать создания версии компонента с диалоговым окном, когда мы решили открыть компонент в диалоговом окне?

В настоящее время я создаю новый компонент диалога ex create-user-form-dialog.component.ts, который имеет тот же шаблон, что и моя желаемая переменная dialogComp. и теперь открываем этот новый диалоговый компонент this.dialog.open(CreateUserFormDialog, { ... });

Компонент диалога имеет ссылку на диалог и введенные данные.

@Component({
    selector: 'app-create-user-form-dialog',
    template: `
        <app-dashboard-dialog #dialog>
            <app-create-user-form
                [detail]="injected_detail"
                (create)="createUser($event)"
                (cancel)="cancel($event)"
            >
            </app-create-user-form>
        </app-dashboard-dialog>
    `,
    styleUrls: []
})

export class CreateUserFormDialogComponent {
    constructor(
        public dialogRef: MatDialogRef<CreateUserFormDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public injected_detail: Info
    ) {}

Таким образом, create-user-form.component.ts выдает результаты своих кнопок (сохранить, отменить и т. д.), а create-user-form-dialog.component.ts выдает обратно через метод dialogref.close. Не уверен, насколько это усложняет ситуацию и можно ли каким-то образом использовать ViewChild.


angular viewchild mat-dialog
person Ken    schedule 13.05.2020    source источник
comment
Возможно, эта статья Вы ищете.   -  person ionut-t    schedule 13.05.2020
comment
Я сделал что-то подобное для проекта недавно. Вы должны внедрить компонент, который хотите отобразить в диалоговом окне, а затем настроить службу для передачи ответа обратно компоненту, который запустил диалоговое окно, потому что вы не можете использовать входы или выходы. Сначала это требует больших усилий, но это возможно, и в итоге вы получите только один диалоговый компонент. Я посмотрю, смогу ли я сделать пример...   -  person Matt Saunders    schedule 13.05.2020
comment
Вам повезло с @Ken ниже?   -  person Matt Saunders    schedule 18.05.2020

Ответы (1)


arrow_upward
3
arrow_downward

Я создал репозиторий с базовым примером внедрения компонента (форма) в повторно используемый диалог материалов, который передает пользовательский ввод обратно родительскому компоненту, запустившему диалог.

Вот рабочая демонстрация на Stackblitz.

  • dialog-wrapper — повторно используемый диалоговый компонент
  • dialog-form — это пример компонента, внедряемого в dialog-wrapper, с необходимыми сервисами для ввода/вывода данных
  • name (Алиса) — это пример передачи данных из родительского компонента в dialog-form.
  • DialogFormResponseService обновляет тему с помощью name и значения из formControl faveFood при отправке формы
  • Родительский компонент подписывается на эту службу при открытии dialog-wrapper и закрывает диалоговое окно при получении ответа

оболочка диалога сама по себе довольно проста; большая часть тяжелой работы находится в внедренный компонент и родительский компонент, но на самом деле это всего лишь случай добавления двух служб к компоненту, который вы вводите в диалоговое окно, для обработки связи с родителем.

person Matt Saunders    schedule 14.05.2020