如何从角度2中的子组件中的父组件获取变量？

Question

这是Routing.ts

{ 
path: 'adminHome', 
component: adminHomeComponent, 
children: [ 
    { 
    path: 'users', 
    component: UserListComponent, 
    children: [ 
     { 
     path: ':id', 
     component: EntrepriseListComponent, 
     children: [ 
      { 
       path: ':id2', 
       component: ListLaucauxComponent, 
       children:[ 
       { 
        path:':id3', 
        component:DeviceListComponent } 
         ]....... 

，这是UserListComponent包含用户和路由器出口以显示EntrepriseListComponent

@Component({ 
template :` 
<h2> List of users</h2> 
     <ul *ngFor=" let user of users > 
      <li>{{user.firstName}}</li> 
      <li>{{user}}</li> 
      <li><a [routerLink]="['/adminHome/users',user.id]">L.E</a></li> 
     </ul> 
       <router-outlet></router-outlet> ` 
}) 
export class UserListComponent implements OnInit { 
private users: User[]; 

constructor(private userService: UserService) { } 

ngOnInit() 
{ 
    this.userService.getAllUsers().subscribe(data => {this.users = data}) 
} 

列表，这是EntrepriseListComponent其中包含的列表中Entreprise和路由器插座来显示LocalListComponent

@Component({ 
template:` 
<h2>List of entreprise </h2> 
    <ul *ngFor="let entreprise of entreprises"> 
     <li>{{entreprise .id}}</li> 
     <li>{{entreprise .name}}</li> 
     <li><a [routerLink]=" 
['/adminHome/users/',idUser,entreprise.id]">L.L</a></li> 
    </ul> 
       <router-outlet></router-outlet> ` 
}) 
export class EntrepriseListComponent implements OnInit { 

constructor(private Service:EntrepriseService ,private 
route:ActivatedRoute) { } 

entreprises : Entreprise[]; 
idUser :string ; // this what i want to get from parent 

ngOnInit() { 
this.route.params.forEach(params=>{ 
    this.route.params.forEach(params => { 
     let id = params['id']; 

     this.entrepriseService.getEntrepriseByIdUser(id) 
      .subscribe(data => { 
       console.log(data) 
       this.entreprises = data; 
      }) 
     this.sharedService.userId$.subscribe(data => this.userId = data); 
     this.sharedService.updateUserId(id); 


})  
} 

这是LaucauxListComponent它包含laucaux和路由器出口显示DeviceListComponent

@Component({ 
template: ` 
<h2>List des Locaux </h2> 
<ul *ngFor="let x of laucaux"> 
<li>{{x.name}}</li> 
<li><a [routerLink]="['/adminHome/users/',idUSer,idEntreprise,x.id]">Liste 
Devices</a></li> 
</ul> 
    <router-outlet></router-outlet>` 
}) 
export class ListLaucauxComponent implements OnInit { 
laucaux: Laucaux[] 

constructor(private ls: LoacauxService, private route:ActivatedRoute) { } 
idUSer :string ;// this what i want to get from parent 
idEntreprise : string ;// this what i want to get from parent 

ngOnInit() { 
let id = params['id2']; 

     this.loacauxService.getLaucauxByEntreprise(id) 
      .subscribe(data => { 
       console.log(data) 
       this.laucaux = data; 
      }) 

     //retrieve values 
     this.sharedService.userId$.subscribe(data => this.iduser = data); 
     this.sharedService.enterpriseId$.subscribe(data => this.identreprise 
    = data); 


     //update values 
     this.sharedService.updateUserId(this.iduser); 
     this.sharedService.updateUserId(this.identreprise); 

} 

所以我怎样才能在ListLaucauxComponent获得ID用户在EntrepriseListComponent和ID用户& idEntreprise名单

Answer 1

当跨路由共享数据很喜欢这一点，最好是创建一个共享服务供他们使用。每个组件都可以更新共享服务中的任何相关数据，并且可以使用每个组件可以订阅的Observables来接收共享数据的更新。这将是这个样子：

import { Injectable } from '@angular/core'; 
import { Subject } from 'rxjs/Subject'; 
@Injectable() 
export class SharedService { 
    // Observable string sources 
    private userIdSource = new Subject<string>(); 
    private enterpriseIdSource = new Subject<string>(); 

    // Observable string streams 
    userId$ = this.userIdSource.asObservable(); 
    enterpriseId$ = this.enterpriseIdSource.asObservable(); 

    // Service message commands 
    updateUserId(id: string) { 
    this.userIdSource.next(id); 
    } 
    updateEnterpriseId(id: string) { 
    this.enterpriseIdSource.next(id); 
    } 
} 

使用Subject，组件将只接收那些组件订阅后更新的值。 IE：SharedService发送一个新的userId然后ComponentA订阅userId$ observable。 ComponentA不会获得先前更新的值。如果您需要将任何以前的值发送到组件，而不管他们订阅什么时间，则使用BehaviorSubject而不是Subject。

组件将订阅的价值和这样的更新值：

export class ComponentA { 

    userId:string; 

    constructor(private sharedService: SharedService){} 


    ngOnInit(){ 
     //retrieve values 
     this.sharedService.userId$.subscribe(data => this.userId = data); 

     //update values 
     this.sharedService.updateUserId('newValue'); 
    } 
} 

希望这有助于。