лучшая практика для запуска модального события из компонента

Question

В последнее время я пробую Angular5, и я хотел бы узнать, как лучше всего запускать события в другом компоненте.

Итак, это моя структура приложения прямо сейчас:

index.html

<main-app></main-app>

app.component.html

<main-navbar></main-navbar>
<router-outlet></router-outlet>

<auth-modal></auth-modal>   

Модальный компонент Auth

import { Component, EventEmitter } from '@angular/core';

@Component({
    selector: 'auth-modal',
    templateUrl: 'modal.component.html'
})

export class AuthModal {
    hidden: boolean = true;

    closed: EventEmitter<any> = new EventEmitter();

    close(event: KeyboardEvent){
        this.hidden = !this.hidden;
        this.closed.next(true);
        event.stopPropagation();
    }
}

Таким образом, компонент main-navbar в основном html, никакой логики внутри. Я пытаюсь приблизиться к этому, создавая пользовательский модал (например, начальную загрузку), поэтому, когда я нажимаю кнопку на панели навигации, он запускает модальный компонент, и он открывается.

Вместо кода, я хотел бы, какой подход я должен следовать.

Я искал об этом, но я не люблю использовать сторонние пакеты, так как основная цель - учиться вместо достижения желаемого результата.

РЕШЕНИЕ

Благодаря https://stackoverflow.com/users/6036154/embarq и https://stackoverflow.com/users/271012/ryan я получил решение здесь: https://angular -jswxqi.stackblitz.io /

Answer 1

Предлагаю вам внедрить сервис для управления модалом. Прототип для этой услуги может быть

enum ModalState { Close, Open }


class ModalController {
    public readonly modalState$: Subject<ModalState>;

    constructor() {
        this.modalState$ = new Subject<ModalState>();
    }

    public open() {
        this.modalState$.next(ModalState.Open);
    }

    public close() {
        this.modalState$.next(ModalState.Close);
    }
}

Таким образом, эта минимальная реализация может быть использована следующим образом:

1. ModalComponent подписывается на ModalController.modalState$ и обрабатывает изменения
2. ModalService.open и ModalService.close могут использоваться любыми компонентами во всем приложении

Answer 2

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

Если вы хотите, есть также Angular Material CDK (набор для разработки компонентов), который имеет Portal и PortalHost - специально созданный для внедрения таких вещей, как модалы, в DOM