angular - 我应该从 constructor() 还是 ngOnInit() 实例化一个 Observable?

标签 angular rxjs observable ngrx ngrx-store

<分区>

我知道一般来说,应该在构造函数中实例化实例变量和依赖项,无论是注入(inject)、new 还是来自 @ngrx/store 选择():

@Component
export class MyCoolComponent implements OnInit {
    public coolObservable$: Observable<any>;
    public myItems$: Observable<Item[]>;

    constructor(private myCoolService: CoolService, private store: Store) {
        // Instantiate the Observables here?
        this.coolObservable$ = Observable.of('cool!');
        this.myItems$ = this.store.select('items');
    }

    public ngOnInit() {
        // Or instantiate the Observables here?
        this.coolObservable$ = Observable.of('cool!');
        this.myItems$ = this.store.select('items'); 
    }
}

Angular 的最佳实践是什么?

最佳答案

ngOnInit() 用于确保您使用的组件的属性已经初始化。例如,在返回 Observable 的构造函数 getProductById() 中调用以下代码是错误的,因为属性 productId 是未定义的:

@Input() productId: number;

constructor(private productService: ProductService) {}
        
ngOnInit() {
          
  this.product = this.productService.getProductById(this.productId);
}

但在您的情况下,您只需在构造函数中初始化两个变量而不使用任何组件属性,因此将这段代码保留在构造函数中就可以了。

话虽如此,一些纯粹主义者会对构造函数中的任何代码皱眉,但纯粹主义者并不总是正确的:)。

关于angular - 我应该从 constructor() 还是 ngOnInit() 实例化一个 Observable?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49794886/

相关文章:

angular - 执行快速滑动会导致按钮对首次单击没有反应

html - 刷新(提交)进程 Angular2 和 Firebase 上的页面

rxjs - fromFetch 运算符不会在取消订阅时重置缓存

ObservedObject 更改时 SwiftUI View 未更新

angular - 跨源请求过滤掉了我的大部分 API 响应 header

angular - 如何在 Angular 2 事件处理程序中访问 'this'?

javascript - Angular-CLI 错误 : Return type of public method from exported class has or is using name 'ErrorObservable' from external module but cannot be named

javascript - Rxjs 订阅队列

javascript - 使用 Angular Observable 满足异步分支和同步分支

javascript - 如何组合两个返回 Rx Observables 的相似 http 请求?