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

 
}