Angular2 為什么使用異步管道

Question

我了解 Async 管道適用於 observable 並幫助我們為稍后將要出現的數據加載異步內容。

但是我也可以在不使用異步的情況下工作。 以下是代碼

零件

export class XComponent{
     someProp: string;
     someList: string[];
     someFn(){
          this.someService.subscribe(
               data=>{
                    this.someProp = data.prop; 
                    this.someList = data.list;
               }
          );
     }
}

模板

.....

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

上面的代碼對我有用，不使用異步並且沒有任何問題。 他們為什么要使用異步？ 是不是因為我們不需要為 data 聲明一個變量，我們可以直接使用 observable（我們無論如何都需要聲明一個 observable 而不是 data）？

編輯

以下是從角度文檔中獲取的異步示例代碼

@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);
  });
}

取而代之的是，我可以寫

@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); 
  } 
}

對我來說，第二個代碼看起來也很干凈。 （更干凈）

Answer 1

內容：使用AsyncPipe ，我們可以直接在模板中使用 Promise 和 Observable，而無需將結果存儲在中間屬性或變量中

為什么：通常要呈現 promise 或 observable 的結果，我們必須這樣做

1. 等待回調。

2. 存儲回調的結果是一個變量。

3. 綁定到模板中的該變量。

async 使得從 promises 和 observables 渲染數據變得更容易。 假設如果我們在沒有異步的情況下使用 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)
   }

Answer 2

主要原因是因為使用async管道，你的代碼會更干凈。

想象一下這樣一種情況，返回的數據由數十個或數百個鍵組成，而不是兩個。 設置所有內部變量太麻煩了。

另外，根據Angular 文檔， AsyncPipe只會采用 observable 省略的最后一個值（這是在視圖中顯示值的完美解決方案）。 如果您在XComponent中跟蹤可觀察對象本身，那么您就能夠獲取所有值、第一個值並進行各種數據操作。

編輯：為了支持你給出的新例子：

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

Answer 3

你必須訂閱 observables 才能返回它們的數據。 您可以在 HTML 文件中使用異步管道，而不是手動訂閱。 這將訂閱 observable，返回動態值，並在組件更改時取消訂閱 observable。

@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);
  });
}