3

我对 Angular 很陌生，据我所知，这Subject是用于多播的标准类。在尝试这门课时，我发现有两种（可能甚至更多）处理其价值变化的途径。

  1. Observable直接在组件中使用类型对象

    在这种方法Observable中，在组件中声明 an，如下所示：

    foo$ : Observable<boolean>;

    然后使用以下方法在 html 文件中使用：

    <p *ngIf="(foo$ | async) as foo">Bar!</p>

  2. 第二种方法是Subscription在组件中有一个类型对象，它分配给一些成员变量：

    s: Subscription;
foo: boolean;

    订阅初始化如下：

    constructor(private fbs: FooBarService) {
    this.s = fbs.fooObservable.subscribe(v => this.foo = v);
    //  this.s.unsubscribe() is called within ngOnDestroy()
}

    然后 html 将使用如下代码：

    <p *ngIf="foo">Bar!</p>

除了个人偏好之外，还有什么理由更喜欢这些方法中的任何一种吗？

4

1 回答 1

4

除了个人偏好之外，还有什么理由更喜欢这些方法中的任何一种吗？

这些类型的问题在这里是题外话，但社区给出一个一般性的答案是有价值的。两者之间有足够的区别，应该讨论。

一种方法称为反应组件，另一种称为有状态组件。

反应组件

async视图使用管道处理来自可观察对象的数据表示。如果一个组件只使用 observables 和async管道来表示，那么该组件是无状态的，并通过视图自动对更改做出反应。这有助于为模板创造一种更干燥的感觉。

这种方法具有以下优点。

  • 不太可能出现“检查后表达式已更改”错误。
  • 通过 observables 更容易表示服务或存储的外部状态。
  • OnPush更容易使用更改通知。
  • 这种设计方法创建了一个响应速度更快的组件，可以对开发人员的更改做出反应，而开发人员的工作量要少得多。

这种方法具有以下缺点。

  • data.subscribe(value => this.value = value)当开发人员不了解反应式编程时，他们可能会写作。
  • 当多个可观察对象被合并、切换或组合时，源代码可能很难理解，而没有太多解释为什么。
  • 引入了内存泄漏和丢失订阅的风险。
  • 开发人员有时可以在他们不了解所有副作用的情况下使用运算符。使用mergeMap()代替switchMap()作为示例。
  • 您必须跟踪可观察对象的生命周期。
  • IDE 编辑器很难自动完成类型。例如; 将在大多数 IDE 中创建一个未知类型<ng-container *ngIf="data$ | async as data">的视图变量数据。
  • 陡峭的学习曲线。RXJS 并不容易掌握。
  • 很难调试，debugger;因为组件没有要调试的状态。
  • 单元测试更难。没有组件状态可以断言它是正确的。

有状态组件

当组件具有在视图模板中使用的属性时，它是有状态的。必须更改组件的内部状态才能表示视图的更改，这是 Angular 中组件的默认类型。

这种方法具有以下优点。

  • 更容易开发、维护和阅读源代码。
  • @Input()绑定一开始是有状态的。
  • IDE 具有更好的组件属性自动完成功能。
  • 有更容易的学习曲线。无需学习第三方库。
  • 它更容易debugger;在浏览器中使用，因为您可以看到组件的当前状态。
  • 单元测试更容易。

这种方法具有以下缺点。

  • 使用服务中的外部状态时，最有可能出现“检查后表达式已更改”错误。
  • subscribe()混入可观察对象时，源代码会因调用而变得杂乱无章。
  • 您必须手动将反应流转换为组件状态，并编写类似data.subscribe(value => this.data = value).
  • 使用外部可观察对象时，更改检测成为一项挑战。
  • 创建一个响应外部事件和可观察对象的响应式组件需要更多的代码行。

结论

在决定使用这两种方法中的哪一种时。我建议从有状态组件开始，但将您的技能提高到反应式组件。

根据我的经验，响应式组件是可行的方法，因为它们是可观察流的目的地。这些组件将可观察对象组合在一起以创建该数据的响应式视图，并且它们会自动对这些流中的更改做出反应。同时，将数据合并为目的地更像是 Angular 中的一种架构设计。所以这是一个更广泛的讨论和主题，但继续学习，你就会到达那里。

于 2019-05-19T17:59:40.423 回答