Angular4の2つの兄弟コンポーネント間の共有サービス

Question

私は2つの兄弟コンポーネント、1つのMapComponentと1つのMenuComponentを持っています。すべてのプロジェクトはGoogleMap（MapComponent）に表示されます。マーカーをクリックすると、そのプロジェクトのID（siteId）が取得されます。私がしたいのは、そのプロジェクトidを取得してそれを私のメニューのリンクに使用することです。プロジェクトごとに、プロジェクトIDと一意のリンクを作ります：/ project1/10001 私は兄弟から共有サービスを持っていますコンポーネントは値を直接交換できません。私は共有サービスにプロジェクトIDを書くことができますが、私の問題は私のmenulinksでプロジェクトIDを取得することです。これはどうすればいいですか？ （私は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

は、ここで私はあなたの状況にどうなるのかです。あなたがその

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

に向けて、あなたのコンポーネントの設定のほとんどを持っているようAngular 2 send array another page

は、私はあなたがこのようなリンクを生成することはできませんサービスのアプローチをお勧めしますか？

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

 
}