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，里面没有逻辑。我想要解决的是，构建自定义模式（如引导程序），因此当我单击导航栏中的按钮时，它会触发模态组件并打开。

我想要采用哪种方法，而不是代码。

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

解

感谢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);
    }
}

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

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

Answer 2

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

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

从组件

2 个答案: