javascript - 从组件触发模态事件的最佳实践

Question

最近，我正在尝试 Angular5，我想知道在其他组件中触发事件的最佳实践。

这就是我现在的应用程序结构:

index.html

<main-app></main-app>

app.component.html

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

<auth-modal></auth-modal>   

身份验证模式组件

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，里面没有逻辑。我想要实现的是，构建自定义模式(如 Bootstrap )，因此当我单击导航栏中的按钮时，它会触发模式组件并打开。

我想要遵循哪种方法，而不是代码。

我已经搜索过这个，但我不喜欢使用第三方软件包，因为主要目的是学习而不是达到预期的结果。

解决方案

感谢https://stackoverflow.com/users/6036154/embarq和 https://stackoverflow.com/users/271012/ryan我在这里得到了解决方案: https://angular-jswxqi.stackblitz.io/

Answer 1

我建议您实现用于控制模式的服务。该服务的原型(prototype)可能是

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 可供整个应用中的任何组件使用