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 /存储路由哑组件

回答

相关问题