iT邦幫忙

0

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

  • 分享至 

  • xImage

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

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

0
微中子
iT邦新手 4 級 ‧ 2018-03-06 13:38:58
<a (click)="refresh()">
refresh() {
    // 綁定的內容重新渲染
}
看更多先前的回應...收起先前的回應...
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 嗎?
你只會比臉書少 ˊˋ

2
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

twrichgod iT邦新手 5 級 ‧ 2018-03-07 09:00:38 檢舉

謝謝您,
只是目前新手一枚,還無法馬上理解...
今天下班後再研究看看,感謝範例,幫助很大。

AlanShun iT邦新手 5 級 ‧ 2018-03-07 09:20:13 檢舉

/images/emoticon/emoticon08.gif

我要發表回答

立即登入回答