用于 rxjs 流的外观模式以实现更干净的 Angular 架构？

Question

上下文：

我正在开发一个 Angular 15 应用程序，我在其中区分智能组件和哑组件。我的智能组件确实与服务有连接，而哑组件仅通过输入和输出与智能组件进行通信，并且不注入任何服务。

在智能组件中，我使用反应式声明性 (rxjs) 方法来对事件做出反应。然而，目前这些智能组件涉及许多反应流，这使得组件变得臃肿。

由于这些智能组件是许多事件的“收集器”和对 api 服务的“访问”，我看不出如何将组件分解为更小的部分的合理方法。

问题：

我正在考虑使用设计模式，例如Facade 模式，通过将反应流放入单独的服务中来整理组件，并且组件只需订阅最终的可观察量并处理副作用（例如 UI 更新）。

但是，我想知道这是否是一个明智的方法，以及是否有更好的方法来处理这种情况。

复杂智能组件示例：

class MySmartComponent {
  // ... several @Input and private members

  // Multiple RxJS streams to handle different scenarios
  dataFromRoute$: Data[] = this.route.url.pipe(/* ... */);
  dataAfterAdded$: Data[] = this.addDataButtonClick$.pipe(/* ... */);
  dataAfterMore$: Data[] = this.getMoreDataButtonClick$.pipe(/*...*/);
  dataAfterDeleted$: Data[] = this.deleteDataButtonClick$.pipe(/* ... */);

  data$: Observable<Data[]> = merge(
        this.dataFromRoute$,
        this.dataAfterAdded$,
        this.dataAfterMore$
        this.dataAfterDeleted$,
    ).pipe(/*...*/);

  searchInput$ = new BehaviorSubject<string>(''); // user can search/filter Data

  // subscription only to this Observable via async pipe in template!
  filteredData$: Observable<Data[] | null> = combineLatest([
        this.data$,
        this.dataSearchInput$,
    ]).pipe(

  // function calls by child components
  onSearchInputChange(value: string) { /* ... */ }
  onDeleteDataClick(event: SomeEvent) { /* ... */ }
  // ... more logic
}

Answer 1

通常使用单独的服务来管理数据是一种有效的方法。您可以创建“MySmartService”，使其成为非单例，并将其声明为 MySmartComponent 的提供者。例如：

@Injectable()
export class MySmartService {
   ...
}

@Component({
    providers: [MySmartService]
})
class MySmartComponent {
    constructor(private mySmartService: MySmartService) {}
}

这样，您的 MySmartService 将仅在创建

MySmartComponent

时创建。此外，您还可以将

ngOnDestroy

生命周期挂钩添加到

MySmartService

来完成数据流。它会起作用，因为

MySmartService

将与

MySmartComponent

一起被销毁。

我不会称之为

Facade

想法。

Facade

模式是用于多个服务或某些复杂结构的结构化API。在这种情况下，我们只有一个具有不同 API 调用/数据流的组件。也许创建多个附加服务是有意义的 - 一个用于 API，一个用于用户事件，等等。因此，每项服务都有一个目的并遵循单一职责原则。