Angular要如何在當前頁面重新整理呢

angular angular2

twrichgod 2018-03-06 12:09:11 ‧ 7667 瀏覽

分享至

假設有ABC三個tab，
點A時遷移到A頁面，
在A頁面再點一次Atab的話，
頁面會完全沒動靜，
一般的邏輯應該是要重新整理才對...
請問要怎麼達成呢？

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

微中子

iT邦新手 4 級 ‧ 2018-03-06 13:38:58

<a (click)="refresh()">

refresh() {
    // 綁定的內容重新渲染
}

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

twrichgod iT邦新手 5 級 ‧ 2018-03-06 14:24:51 檢舉

謝謝您的解惑
想再追問一下。
a標籤本身已經有routerLink屬性了，再加上refresh()的話，
從其他頁面遷移到A頁面的時候，A頁面會不會重新宣染兩次？

<a routerLink="A頁面">

改成

<a routerLink="A頁面" (click)="refresh()">

微中子 iT邦新手 4 級 ‧ 2018-03-06 16:25:20 檢舉

不確定 console.log 一下看看
此外直接弄個 subscribe 會比讓使用者點擊才更新好

twrichgod iT邦新手 5 級 ‧ 2018-03-07 08:56:30 檢舉

我的理解是，弄subscribe的話只要資料有更新頁面就會刷新對不對？
有些頁面太頻繁的更新感覺也不好，
所以目前的作法是五分鐘自動更新一次，
使用者想馬上更新就手動點擊這樣。

微中子 iT邦新手 4 級 ‧ 2018-03-07 09:45:08 檢舉

不會不好你知道臉書有多少 subscribe 嗎？
你只會比臉書少 ˊˋ

登入發表回應

AlanShun

iT邦新手 5 級 ‧ 2018-03-06 16:28:58

我想你是要針對不同的參數來取得不同的資料，通常我們的做法會是下面這樣，

  obs$: Subscription;
  array: []=[];
  constructor(
    private _activatedRoute: ActivatedRoute,
  ) {
  this.obs$ = this._activatedRoute.params.pipe(
      switchMap(params => {
          return 要發送的httpRequest;
      }),
      tap(data=>{
          this.array = data;
          // refresh data;
      })
  ).subscribe();
  
  OnDestory(){
      this.obs$.unsubscribe();
  }

透過switchMap的特性，來取消前一個observable的資料流，再透過tap設定自己的資料，當然如果你沒有要http取得資料，也可以直接tap即可。

另外我這裡是直接在ts做subscribe，我們也可以使用async pipe來做訂閱，如此就不用手動取消了。

以下連結範例
https://stackblitz.com/edit/route-change?file=app/product/product-detial/product-detial.component.html