Angular4中兩個兄弟組件之間的共享服務

Question

我有兩個兄弟組件，一個MapComponent和一個MenuComponent。每個項目都顯示在GoogleMap（MapComponent）上，當我點擊一個標記時，它就會獲得該項目的標識（siteId）。我想要做的是獲得該項目ID並將其用於我的菜單的鏈接，以便爲每個項目使用與項目ID的唯一鏈接，如：/ project/10001 我有一個共享服務，因爲兄弟姐妹組件不能直接交換值。我可以將項目編號寫入共享服務，但我的問題是在我的menulinks中提取項目編號。我該怎麼做呢？ （我使用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

這裏是什麼，我會在你的情況做。 Angular 2 send array another page

我推薦的服務方式，你有大部分的組件安裝的實現這一

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 
 
     } 
 
    });

你能不產生這樣的聯繫？

> 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>

您的服務需要扭捏作此位。

@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(); 
 
    } 
 

 
}