Angular2使用@Input和router-outlet。處理在NGRX /存儲路由啞組件

所以，我有一個容器組件「檔案」這裏面有一個導航 - 切換標籤，如「信息」，「收藏」，「PublishedArticles」。Angular2使用@Input和router-outlet。處理在NGRX /存儲路由啞組件

我目前加載與路由器，網點和子路由這些標籤撒謊「/信息」，「/收藏夾」，「/篇」。一旦路由器出口導航到立方體組件，我想將加載的配置文件狀態切片傳遞給它。

我剛剛意識到正常的@輸入將無法用於以這種方式加載啞元組件（通過router-outlet）。現在我正在尋找解決方案，以某種方式實施它，而不需要太多的重組。

什麼是最好的方式溝通狀態的愚蠢組件（子路線）由router-outlet加載？或者，可能的話，你通常會如何處理這種情況？

2016-12-25 Daniil Andreyevich Baunov

看一看[這一個]（http://stackoverflow.com/questions/35478994/angular-2-passing-object-via-route-params-possible）。使用提供者在「組件」之間共享數據 – John

看起來像處理這個問題的一般方法是（a）在組件之間創建共享服務並在它們之間綁定變量數據，或者如果您不需要數據綁定：（b ）通過路由參數傳遞值 –

我會做一個Service注入到共享同一數據的所有部件，像這樣的：

@Injectable() 
export class SharedDataService { 
    someData:Object={} 
    constructor() { 

    } 
}

然後，在你的組件，你可以聆聽到爲了使用Router服務導航改變更新組件和用戶界面中的數據。

import {Component,OnInit} from '@angular/core'; 
import {NavigationEnd, Router} from "@angular/router"; 
import {SharedDataService} from "../shared-data.service"; 
@Component({ 
    selector: 'profile', 
    templateUrl: './profile.component.html', 
    styleUrls: ['./profile.component.css'] 
}) 
export class Profile implements OnInit { 
    someData:Object; 

    constructor(private sharedDataService: SharedDataService, private router:Router) { 
    this.someData = this.sharedDataService.someData; 
    this.router.events.subscribe((val)=>{ 
     if(val instanceof NavigationEnd){ 
      //update the shared data when this page is being navigated to 
      this.someData=this.sharedDataService.someData; 
     } 
    }); 
    } 
}

來源

2017-01-01 06:58:29 John

Angular2使用@Input和router-outlet。處理在NGRX /存儲路由啞組件

回答

相關問題