如何从角度2中的子组件中的父组件获取变量?
这是Routing.ts如何从角度2中的子组件中的父组件获取变量?
{
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名单
当跨路由共享数据很喜欢这一点,最好是创建一个共享服务供他们使用。每个组件都可以更新共享服务中的任何相关数据,并且可以使用每个组件可以订阅的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');
}
}
希望这有助于。
它不工作我得到像这样的URL http:// localhost:3000/adminHome/users/undefined/undefined/58e93cf117041327fc3934af!我应该怎么把('newValue'); –
此共享服务和值独立于您的URL路由参数。可能你想要做的是在路由参数中使用正确的值,然后该路由的组件将从路由参数中检索值并将其发送到共享服务,如'this.route.params.subscribe(param = > this.sharedService.setUserId(param ['userId']);'有道理? –
可能重复的[如何从父母到孩子的组件ID?](http://*.com/questions/43292016/how-to-get-the-id-from-parent-to-child-组件) –
它没有应答 –