从组件触发模态事件的最佳实践答案

【问题标题】：best practice to trigger modal event from component从组件触发模态事件的最佳实践
【发布时间】：2018-10-09 10:42:16
【问题描述】：

最近，我正在尝试 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，里面没有逻辑。我想要解决的是，构建自定义模式（如引导程序），所以当我点击导航栏中的按钮时，它会触发 modal 组件并打开。

我希望我应该遵循哪种方法，而不是代码。

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

解决方案

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

【问题讨论】：

考虑接受答案。

标签： javascript angular angular5

【解决方案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);
    }
}

所以这个最小的实现可以如下使用：

ModalComponent 订阅 ModalController.modalState$ 并处理更改
ModalService.open 和 ModalService.close 可以被整个应用中的任何组件使用

【讨论】：

OP 确实说“我希望采用这种方法而不是代码”，但这是正确的
@embarq 和 Ryan，感谢您的回复！我到了某个地方，但我坚持如何订阅 modelState$ 值，在这里创建了一个应用程序：stackblitz.com/edit/…
我设法找到了一个解决方法，稍微改变了模式服务，因为我不知道如何使用枚举（无法将 ModalState 分配给布尔值错误）

【解决方案2】：

一种方法是使用发出事件并且也可以订阅的服务。在 AppModule 中提供服务，并将其注入到侦听事件的模态中，以及任何可能触发模态显示的组件中。

如果你想要的话，还有 Angular Material CDK（组件开发工具包），它有一个 Portal 和 PortalHost - 专门用于将模态之类的东西注入到 DOM 中

【讨论】：