Angolare 2 come passare la variabile dal componente padre all'uscita del router

Question

Tutte le esercitazioni e le risposte che ho trovato mostrano solo come passare una variabile dal componente padre al componente figlio utilizzando gli input, ma cos'è questo componente figlio contenuto nel router presa e non direttamente nel modello genitore ??

esempio:

componente principale

@Component({ 
    selector: 'my-app', 
    template: ` 
      Main page 
      <router-outlet></router-outlet> 
       `, 
    directives: [ROUTER_DIRECTIVES] 
}) 

@RouteConfig([ 
    { path: '/contact', name: 'Contact', component: ContactComponent}, 
]) 

export class AppComponent{ 
    public num:Number = 123; 
} 





@Component({ 
    selector: 'contact-page', 
    template: 'contact page' 
}) 
export class ContactComponent{ 
    public num:Number; 
} 

Quindi in questo esempio il modello di componente principale contiene una presa di router in cui sarà reso la componente contatto bambino, ma come posso ottenere variabile "num" valore nel componente figlio valutato all'interno di un router in uscita dal componente dell'app principale ??

Answer 1

Attualmente non è possibile eseguire il binding ai componenti aggiunti dal router. Utilizzare invece un servizio condiviso (ci sono già un sacco di esempi su SO) per passare i dati da o verso il componente aggiunto o per iscriversi agli eventi.

Vedi anche questo problema https://github.com/angular/angular/issues/4452 soprattutto questo commento https://github.com/angular/angular/issues/4452#issuecomment-153889558

Answer 2

Se i dati sono immutabili, è possibile utilizzare RouteData.

@Component({...}) 
@RouteConfig([ 
    { path: '/contact', name: 'Contact', component: ContactComponent, data: {num: 123}}, 
]) 
export class AppComponent { 
} 

@Component({...}) 
export class ContactComponent { 
    public num:Number; 
    constructor(data: RouteData) { 
    this.num = data.get('num'); 
    } 
} 

Potrebbe essere utile passare alcune opzioni di configurazione che non si desidera utilizzare come hardcode nei percorsi figlio. Ma se ti aspetti che i dati cambino, avrai bisogno di un altro metodo.

Answer 3

Mi sono appena imbattuto in questa domanda, ecco come ho risolto problemi simili.

Vorrei utilizzare un servizio per risolvere questo. Quindi è possibile che tutti i bambini e il genitore impostino la proprietà e le modifiche vengano propagate per tutti gli utenti. In primo luogo vorrei creare un servizio con un BehaviorSubject privato che hanno un getter pubblico e setter, per incapsulare ReplaySubject e solo tornare Observable:

private _property$: BehaviorSubject<number> = new BehaviorSubject(1); 

set property(value: number) { 
    this._property$.next(value); 
} 

get property$(): Observable<number> { 
    return this._property$.asObservable(); 
} 

La ragione per usare nuove BehaviorSubject (1), è quello di impostare il valore iniziale 1, quindi c'è qualcosa a cui iscriversi.

nei genitori OnInit, lo farei SE il valore predefinito della proprietà (num):

private _propertySubscribtion: Subscription 

ngOnInit() { 
    // set default value to 5 
    this._componentService.property = 5; 

    // If property is updated outside parent 
    this._componentService.property$.subscribe(p => { 
     this.property = p; 
    }); 
} 

ngOnDestroy() { 
    this._propertySubscribtion.unsubscribe(); 
} 

In uno o più dei componenti figlio, è possibile abbonarsi per le modifiche:

private _propertySubscribtion: Subscription 

ngOnInit() { 
    this._propertySubscribtion = this._componentService.property$.subscribe(p => { 
     this.property = p; 
    }); 
} 

ngOnDestroy() { 
    this._propertySubscribtion.unsubscribe(); 
} 

e se qualche bambino o genitore aggiorna la proprietà:

updateProperty() { 
    // update property 
    this._componentService.property = 8; 
} 

Tutti gli abbonati potranno sapere.