2017-08-22 18 views
-1

我正在創建應用程序歷史記錄功能,並且需要從每個組件初始化時從http調用中獲取的每個組件獲取變量。從我導航到的組件中獲取變量router.events.subscribe

目前我只訂閱router.events我AppComponent內,像這樣

export class AppComponent { 
    constructor(private router: Router, private historyService: HistoryService) { 
     this.router.events 
      .filter(e => e instanceof NavigationEnd) 
      .subscribe((routerEvent) => { 
       console.log('Storing History Entry: ', routerEvent); 
       this.historyService.saveEntry(routerEvent); 
      }); 
    } 
} 

有我得到來自各部件的變量中,這一點,並通過它傳遞給歷史業務這麼一種方式歷史可以包含這個變量?

回答

1

如果它是一個固定值,則可以使用r上的data屬性首先配置爲每個路由提供一點數據。

{ 
    path: 'products', 
    data: { someBitofInfo: 'info'}, 
    component: 'ProductComponent' 
}, 

data屬性是隻讀的,因此您只能將其用於固定值。但是你可以爲每個路徑定義一個不同的固定值。

OR

如果不是(該數據是不固定的),那麼你可以在名稱的URL作爲可選或查詢參數添加一個選項...中的缺點是,它會顯示出來在地址欄中。但是,如果你不在乎你的地址欄的網址是什麼,那麼它就是你的選擇。

+0

不幸的是我實際上使用來自uri的唯一id來獲取對象的信息,所以它是對於每條路徑都不固定。 –

+0

如果它在URL上,那麼只需從URL中拉出即可。訂閱路由器事件時,您可以訪問URL。 – DeborahK

+0

這是我可以訪問的url中的一個數字,我需要使用該數字從服務中獲取該對象的名稱。該號碼是唯一的標識符,但名稱可能不唯一。我打算再次從歷史記錄服務中撥打電話,我只是希望使用組件中已有的值,而不是再次撥打電話。 –

0

你可以使用的組件之間的共享服務,並使用該服務的屬性:

export class AppComponent { 
    constructor(private router: Router, private historyService: HistoryService) { 
     this.router.events 
      .filter(e => e instanceof NavigationEnd) 
      .subscribe((routerEvent) => { 
       console.log('Storing History Entry: ', routerEvent); 
       this.historyService.saveEntry(this.shared.service.getMyVar()); 
); 
      }); 
    } 
} 

甚至直接從historyService調用getMyVar。

共享服務

myVar:any; 
getMyVar(){ 
return this.MyVar; 
} 
setMyVar(value){ 
this.myVar=value; 
} 

部件

this.sharedService.setMyVar(value) 

的其它解決辦法是使用本地存儲,但它有萬一用戶禁用本地存儲

約束
+0

好主意,但它看起來像我們不能保證路由器事件和組件生命週期掛鉤之間的時間。 https://github.com/angular/angular/issues/17473 –

+0

謝謝你的鏈接,很高興知道:) – Vega