Question

我理解Async管道可以在observable上工作，并帮助我们为稍后会出现的数据加载异步。

但是我也可以在不使用异步的情况下工作。以下是代码

组件

.....

<label>Prop</label>
<span>{{someProp}}</span>
<label>List</label>
<span *ngFor="let item of someList">{{item}}</span>

模板

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time | async }}</div>'
})
export class AsyncObservablePipeComponent {
  time = new Observable<string>((observer: Subscriber<string>) => {
    setInterval(() => observer.next(new Date().toString()), 1000);
  });
}

以上代码适用于我而不使用异步且没有任何问题。他们为什么要使用异步？是因为我们不需要为数据声明变量而且我们可以直接使用observable（我们总是需要声明一个observable而不是数据）？

修改的

以下是从异步示例

的角度文档中获取的代码

@Component({
  selector: 'async-observable-pipe',
  template: '<div><code>observable|async</code>: Time: {{ time }}</div>'
})
export class AsyncObservablePipeComponent {
  time;
  constructor(){
    setInterval(() => time = new Date().toString(), 1000); 
  } 
}

而不是我可以写

SELECT NAME，SALARY
FROM STAFF
WHERE SALARY>(SELECT AVG(SALARY) FROM SFAFF)
AND YEARS < (SELECT AVG(YEARS) FROM STAFF)

对我来说，第二个代码看起来也很干净。（甚至更干净）

Answer 1

主要原因是因为使用async管道，您的代码会更清晰。

想象一下，返回的数据包含数十或数百个密钥而不是两个密钥。设置所有内部变量太麻烦了。

作为补充，根据Angular docs，AsyncPipe将仅采用observable省略的最后一个值（这是在视图中显示值的完美解决方案）。如果你在XComponent中跟踪observable本身的踪迹，那么你就能够获得所有值，第一个值并进行各种数据操作。

编辑：为了支持您给出的新示例：

time = Observable.interval(1000).flatMap(() => new Date().toString());

Answer 2

什么：使用AsyncPipe，我们可以直接在模板中使用promises和observable，而不必将结果存储在中间属性或变量上

为什么：通常要渲染承诺或可观察的结果我们必须这样做

等待回电。
存储回调的结果是一个变量。
绑定到模板中的该变量。

async使承诺和可观察对象更容易渲染数据。假设如果我们使用没有异步的observable，我们必须从observable订阅数据，我们需要在ngdestroy钩子上取消订阅以避免内存泄漏。但async会自动处理这个。

“异步管道订阅Observable或Promise并返回它发出的最新值。当发出新值时，异步管道标记要检查更改的组件”

如何

`@Component( { selector: 'async-observ', template: ` <div> <h5>Async demo</h5> <p>{{ observable | async }}</p> </div> }) class AsyncObservComponent { observable: Observable<number>; constructor() { this.observable = this.getObservable(); } getObservable() { return Observable .interval(1000) .take(5) .map((v) => v*v) }

Angular2为什么异步管道

2 个答案: