事件排放多层次策略

时间:2019-09-23 14:28:30

标签: angular eventemitter

是否存在从嵌套组件堆栈中最底层的组件传递数据的正式约定?我遵循的是聪明的父母,愚蠢的孩子的惯例,我在决定让孙子将其传递给父母与父母将其传递给祖父母与确定使用服务之间遇到麻烦。我不愿使用服务,因为组件之间是相关的,并且我想避免让我的服务因主题过于混乱。

我知道最好保持文件夹结构尽可能平坦,并且在可能的情况下应避免嵌套组件,但是在我的特定情况下,将其深3层是有意义的。

选择1:孙子到祖父母或外祖父母

服务<-祖父母<-父母<-孙子

grandchild.component.ts

saveFormValues() {
    this.eventEmitter.emit(this.myForm.value);
}

parent.component.html

<app-grandchild (eventEmitter)=relayFormValues($event)></app-grandchild>

parent.component.ts

relayFormValues(values) {
    this.relayEvent.emit(values)
}

grandparent.compent.html

<app-parent (relayEvent)=saveChanges($event)></app-parent>

grandparent.component.ts

saveChanges(values) {
    this.myService.save(values).subscribe(() => {...});
}

选项2

服务<-祖父母<-服务<-孙子

myservice.service.ts

formSaveEventSource = new Subject<any>;
formSaveEvent$ = this.formSaveEventSource.asObservable();
...
saveFormEvent(values) {
    this.formSaveEventSource.next(values)
}

save(values) {
// http request
}

grandchild.component.ts

saveFormValues() {
    this.myService.saveFormEvent(this.myForm.value);
}

grandparent.component.ts

this.formSaveSub = this.myService.formSaveEvent$.subscribe(data => {
  this.saveChanges(data);
});
...
this.saveChanges(data) {
  this.myService.save(data).subscribe(() => {...})
}

我倾向于使用事件发射器中继来实现选项1,因为对于选项2,我们要两次调用该服务。再说一次,只是检查一下是否有正式的公约或者我是否对此考虑过多。 official docs似乎只在谈论父母和孩子,而没有其他比这更高的水平了。

0 个答案:

没有答案