Service partagé entre deux composants frères dans Angular4

Question

J'ai deux composants frères, un composant Map et un composant Menu. Chaque projet est affiché sur un GoogleMap (MapComponent), lorsque je clique sur un marqueur, il obtient l'identifiant de ce projet (siteId). Ce que je veux faire est d'obtenir ce id de projet et l'utiliser dans les liens de mon menu, de sorte que pour chaque projet il fasse un lien unique avec l'id de projet, comme:/project/10001 J'ai un service partagé depuis frère les composants ne peuvent pas échanger des valeurs directement. Je peux écrire l'identifiant du projet dans le service partagé mais mon problème est de récupérer l'identifiant du projet dans mes menulles. Comment puis-je faire cela? (J'utilise Angular4)

MapComponent

clickedMarker(siteId: string) { 
    this.ss.selectedSite(siteId); 
    this.route.navigate(['project', siteId]); 
    } 

MenuComponent

selectedSite = this.sharedService.siteId; 

<a class="submenu" *ngFor="let submenu of item.submenu, let i = index" 
    md-list-item [routerLink]="[submenu.url, selectedSite]"> 
    <i class="material-icons spacer">{{submenu.icon}}</i> 
    <div *ngIf="!minimalMenuOpen">{{submenu.name}}</div> 
</a> 

SharedService

@Injectable() 
export class SharedService { 

    public constructor() { 
    console.log('Service is succesfully initialized'); 
    } 

    siteId; 
    selectedSite(siteId) { 
    this.siteId = siteId; 
    console.log(siteId); 
    } 

} 

Answer 1

Voici ce que je ferais dans votre situation. Angular 2 send array another page

Je recommande l'approche de service que vous avez le plus de votre configuration des composants vers cette

activePage: number; 
 

 
constructor(private path: ActivatedRoute) {} 
 

 
    ngOnInit() { 
 
    this.path.queryParams.subscribe(path => { 
 
     // If there is a value 
 
     this.activePage = +path["id"]; 
 
     if (isUndefined(this.activePage)) { 
 
     // What if there is no value 
 
     } 
 
    });

Pouvez-vous pas générer les liens comme celui-ci?

> MenuComponent TS file 
 

 
selectedSite; 
 
this.sharedService.getSelectedSiteId().subscribe(
 
    (siteId: any) => { 
 
    this.selectedSite = siteId; 
 
    });

> MenuComponent HTML file 
 

 
<!-- This make sure links don't start creating till selectedSite available --> 
 
<ng-container *ngIf="!selectedSite"> 
 
    <a class="submenu" *ngFor="let submenu of item.submenu, let i = index" md-list-item [routerLink]="[submenu.url]" [queryParams]="{id:'"+ selectedSite + "'}"> 
 
    <i class="material-icons spacer">{{submenu.icon}}</i> 
 
    <div *ngIf="!minimalMenuOpen">{{submenu.name}}</div> 
 
    </a> 
 
</ng-container>

Votre service ont besoin peu de peaufinage pour cela.

@Injectable() 
 
export class SharedService { 
 

 
    public constructor() { 
 
    console.log('Service is succesfully initialized'); 
 
    } 
 

 
    private siteId: BehaviorSubject<any> = new BehaviorSubject(null); 
 

 
    selectedSite(siteId) { 
 
    this.siteId.next(siteId); 
 
    console.log(siteId); 
 
    } 
 
    
 
    getSelectedSiteId(): Observable<any> { 
 
    return this.siteId.asObservable(); 
 
    } 
 

 
}