Angular 5中使用rxjs的持久订阅

Question

• 显示相同数据的多个组件
• 访问数据的单一服务

现在，当通过Observables接收数据时，我有两种选择：

a）订阅observable以获取一次数据，并再次订阅以获取更新

Answer 1

听起来，您试图理解的概念是如何在使用Angular时规范RxJS的订阅管理。对此，我想到了三个主要的选择：

1. 使用异步管道自动创建和删除订阅。如果您希望严格基于从observable发出的数据进行UI更改，那么Async管道可以在创建组件时方便地创建对给定observable的订阅，并在组件销毁时删除这些订阅。这可以说是使用订阅的最干净的方式。

例如：

@Component({
    selector: 'my-component',
    template: `
        <div *ngFor="let value of value$ | async">
            {{value}}
        </div>
    `
})
export class MyComponent {
    public value$: Observable<String> = this.myValueService
        .getValues()
        .map(value => `Value: $value`);
    constructor(myValueService: MyValueService) {}
}

@Component({
    selector: 'my-component',
    template: `
        <div #myDiv></div>
    `
})
export class MyComponent implements OnInit, OnDestroy {
    private mySub: Subscription;
    constructor(myValueService: MyValueService) {}

    public ngOnInit() {
        this.mySub = this.myValueService.getValue().subscribe((value) => {
            console.log(value);
            // Do something with value
        });
    }
    public ngOnDestroy() {
        this.mySub.unsubscribe();
    }
}