Angular2 using @Inputs con <router-outlet> s

Question

Nella mia pagina ho una navigazione secondaria che mostra alcune sottoview sotto una vista principale comune. Vorrei passare un oggetto alle visualizzazioni secondarie tramite <router-outlet> in modo da poter recuperare i dati una volta nel componente principale e condividerli con i miei componenti secondari.

Nota: se includo la direttiva <one></one> nel main.html, funziona ma questo non è il comportamento desiderato.

Vista principale:

<h1>Details</h1> 
<a [router-link]="['./sub1']">One</a> | 
<a [router-link]="['./sub2']">Two</a> | 
<a [router-link]="['./sub3']">Three</a> 
<hr/> 
<router-outlet [data]="maindata"></router-outlet> 

Sub View 1:

<h2>{{ data.name }}</h2> 
... 

Vista principale:

@Component({ 
    selector: 'main-detail', 
    directives: [ROUTER_DIRECTIVES], 
    templateUrl: './main.html' 
}) 
@RouteConfig([ 
    { path: '/', redirectTo: '/one' }, 
    { path: '/one', as: 'One', component: OneComponent }, 
    { path: '/two', as: 'Two', component: TwoComponent }, 
    { path: '/three', as: 'Three', component: ThreeComponent } 
]) 
export class MainComponent { 
    maindata: Object = {name:'jim'}; 
} 

Sub View 1:

@Component({ 
    selector: 'one', 
    directives: [CORE_DIRECTIVES], 
    inputs: ['data'], 
    templateUrl: './one.html' 
}) 
export class OneComponent { 
    @Input() data; 
} 

Answer 1

Se si tratta di dati semplice è possibile passare attraverso RouteParams

<a [router-link]="['./sub3'],{name:'jim'}">Three</a> 

allora secondo lei sub

@Component({ 
    selector: 'one', 
    directives: [CORE_DIRECTIVES], 
    templateUrl: './one.html' 
}) 
export class OneComponent { 
    data: any; 
    constructor(params: RouteParams){ 
    this.data = params.get('data'); 
    } 
} 

È anche possibile impostare il percorso per sempre passare i parametri dal componente spostando il RouterConfig DENTRO il componente (Nota, questo non è come è normalmente fatto):

export class AppCmp { 
    history: string[] = []; 
    constructor(public list: PersonalizationList, 
       private router_: Router) { 
    list.get('histoy', (response) => { 
     this.history = response; 
    }); 
    router_.config([ 
     { path: '/', component: HomeCmp, as: 'Home', data: this.history }, 
     { path: '/about', component: AboutCmp, as: 'About' } 
    ]); 
    } 
} 

Credit to the Source

Se avete intenzione di fare qualcosa di più complesso vi consiglio di utilizzare un servizio per comunicare tra percorsi/componenti. In realtà è il modo in cui preferisco farlo.

Servizio Esempio:

import {Injectable} from 'angular2/angular2'; 

@Injectable() 
export class CarsService { 
    list1: array<any> = ['a','b','c','d']; 
    list2: array<any>; 

    constructor() { 
    this.list2 = [1,2,3,9,11]; 
    } 
} 

Come si inietta un servizio:

export class Cars { 
    constructor(cars:CarsService) { 
    this.cmpList1 = cars.list1; 
    this.cmpList2 = cars.list2; 
    } 
} 

In questo modo è possibile utilizzare il servizio per comunicare indipendentemente dal genitore/figlio o altre restrizioni strane.

Answer 2

Sembra che la sintassi sia stata modificata. Qui sotto funziona per me ~ Angular4.0.0

HTML (linea Passo Parametri)

<li><a [routerLink]="['/templatecreate',{mode:'New'}]">New Job</a></li> 

Componente

constructor(private route: ActivatedRoute) { } 

ngOnInit() {  
    this.getTemplate(); 

    this.sub = this.route.params.subscribe(params => {this.id = params['mode']; 
    console.log("Routing Mode", this.id);  
}) 

Answer 3

Penso che il modo Angular2 adeguato a passare i dati avviene tramite Dipendenza Iniezioni (utilizzando un servizio) altrimenti l'utente sarà in grado di vedere i dati che stai passando nell'URL del browser.

Inoltre, utilizzando un servizio consentirà di "separazione degli interessi", il che significa che componente A non dovrebbe essere dipendente Componente B.

Dependency Injection vicini:

1) https://angular.io/guide/dependency-injection

2) https://angular.io/guide/dependency-injection-in-action

3) https://www.youtube.com/watch?v=MJrw43GP2u0