javascript - Angular 8 : Create Facade Pattern for Subject-Observable design, 发布/订阅

Question

如何将外观模式应用于下面的主题可观察(发布/订阅)代码？

我们有父组件订阅许多服务。 现在了解到更多同级组件和不同功能领域的其他组件需要部分或全部服务订阅。有什么好的方法可以管理并遵循干法(原则上不要重复自己)。

我们是否必须在不同组件中重新订阅相同的一长串服务？ 这些服务可能开始看起来像一个巨大的相互连接的蜘蛛网，所以要小心。

尝试引用此网站:

https://medium.com/@balramchavan/best-practices-building-angular-services-using-facade-design-pattern-for-complex-systems-d8c516cb95eb

父接收者:

constructor
(
  @Inject('AddressMailingStandardService') private addressMailingStandardService: BasicService,
  @Inject('AddressMailingRuralService') private addressMailingRuralService: BasicService,



  @Inject('TypeService') private typeService: BasicService,
  @Inject('SourceService') private sourceService: BasicService,
  @Inject('PurposeOfUseService') private purposeOfUseService: BasicService,


ngOnInit() {

 this.typeService.currentMessage.subscribe(currentAddressTypeMessage => {
      this.addressTypeMessage = currentAddressTypeMessage;
      this.addressTypeData = this.addressTypeMessage;
    });

    this.sourceService.currentMessage.subscribe(currentAddressSourceMessage => {
      this.sourceMessage = currentAddressSourceMessage;
      this.sourceData = this.addressSourceMessage;
    });

    this.purposeOfUseService.currentMessage.subscribe(currentAddressPurposeMessage => {
      this.purposeOfUseMessage = currentAddressPurposeMessage;
      this.purposeOfUseData = this.addressPurposeOfUseMessage;
    });




    this.addressMailingStandardService.currentMessage.subscribe(currentMessage => {
      this.addressStandardMessage = currentMessage;
      this.addressMailingStandardData = new AddressMailingData(this.addressStandardMessage.value);
    });


    this.addressMailingRuralService.currentMessage.subscribe(currentRuralMessage => {
      this.addressRuralMessage = currentRuralMessage;
      this.addressMailingRuralData = new AddressMailingData(this.addressRuralMessage.value);
    });

基本服务:

export class BasicService {

  private messageSource = new Subject();
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(currentMessage) {
    this.messageSource.next(currentMessage);
  }
}

发件人示例:

地址邮件标准服务

this.subs.add(this.standardAddressForm.valueChanges.subscribe(data => {
  this.basicService.changeMessage(this.editAddressForm);
}));

类型服务

statusSelectedItemChanged(e) {
  this.selectedItemOutput = e;
  this.typeService.changeMessage(e);

}

Answer 1

我们在应用程序中使用外观模式，我认为必须跨组件订阅类似的可观察量是完全正常的。这就是首先为您提供灵 active 的原因。

也就是说，您可以考虑在 Facade 服务中为常用的可观察值组合创建一个订阅。

然后，如果同级组件需要一组类似的可观察量，它可以使用 Facade 中的订阅片段，而不必单独订阅组件内的每个可观察量。

请查看此 StackBlitz:

https://stackblitz.com/edit/angular-4phytx?file=app.facade.ts