最近,我正在尝试 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/
最佳答案
我建议您实现用于控制模式的服务。该服务的原型(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);
}
}
所以这个最小的实现可以使用如下:
- ModalComponent 订阅
ModalController.modalState$
并处理更改 ModalService.open
和ModalService.close
可供整个应用中的任何组件使用
关于javascript - 从组件触发模态事件的最佳实践,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50081829/