角2共享服務將數據傳遞到組件到組件

Question

我想從我的LandingPage.component傳遞字符串值this.title到我的ResultPage.component。

我檢索list.show價值，它在我的發到我TitleService在像這樣：

landingpage.component.html

<ol> 
    <li (click)="selectShow(list.show)" [routerLink]="['/details', list.id]" *ngFor="let list of shows">{{list.show}} 
    </li> 
</ol> 

landingpage.component.ts

import { TitleService } from '../../services/title.service'; 

constructor(private TitleService: TitleService) {} 

selectShow(show) { 
    this.TitleService.fetchTitle(show) 
} 

以上發送list.show值到我的：

title.service.ts

// this gives us the name of the clicked show, which we send to TitleResolver 
@Injectable() 
export class TitleService { 
    fetchTitle(title) { 
    console.log("title is " + title); // this outputs correctly 
    return title; 
    } 
} 

這裏是我如何管理我的路由：

APP-routing.module.ts

import { TitleService } from './services/title.service'; 

const routes: Routes = [ 
    { path: '', component: LandingPage }, 
    { 
    path: 'details/:id', component: ResultPage 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(routes)], 
    exports: [RouterModule], 
    providers: [TitleService] 
}) 

我的問題

有一次，我收到我的服務組件的title.show值，我不知道該如何然後將其發送到我的接收組件（resultpage.component）

我怎樣才能把我的title值從我的服務我的ResultPage.component？

Answer 1

使標題服務的這樣一個公共屬性：

// this gives us the name of the clicked show, which we send to TitleResolver 
@Injectable() 
export class TitleService { 
    selectedTitle: string; 

    fetchTitle(title) { 
    console.log("title is " + title); // this outputs correctly 
    this.selectedTitle = title; 
    return title; // No need to return it. 
    } 
} 

然後任何其他成分可以注入該服務，並獲得關注this.titleService.selectedTitle

Answer 2

分離...您的着陸頁是用來選擇列表項並導航到結果頁面。讓它做到這一點，只有這一點。讓ResultPage.component完成剩下的工作。注意：其他答案建議將最後一個標題的值存儲在TitleService中。將狀態存儲在服務中並不是一個好主意。然後TitleService不能用作一種通用的方式將任何標題從當前導航中分離出來，並且沒有副作用。

移除（點擊）事件。將「show」添加爲QueryParam。

landingpage.component.html

<li [routerLink]="['/details', list.id]" 
    [queryParams]="{show: list.show}" 
    *ngFor="let list of shows"> 
    {{list.show}} 
</li> 

訂閱路由器PARAMS和queryparams獲得ID和表演。

resultpage.component。TS

import { Component, OnInit, OnDestroy } from '@angular/core'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { TitleService } from '../../services/title.service'; 

@Component({ 
    ... 
}) 
export class ResultPageComponent implements OnInit, OnDestroy { 

itemId: string; 
show: string; 
subParams: any;  // infinite Observable to be unsubscribed 
subQueryParams: any; // infinite Observable to be unsubscribed 

constructor(
      ... 
      private TitleService: TitleService, 
      protected route: ActivatedRoute, 
      protected router: Router, 
      ... 
) {} 

ngOnInit() { 
    this.subParams = this.route.params.subscribe(this.onParams); 
    this.subQueryParams = this.route.queryParams(this.onQueryParams); 
} 

ngOnDestroy() { 
    // Delete active subscribes on destroy 
    this.subParams.unsubscribe(); 
    this.subQueryParams.unsubscribe(); 
} 

onParams = (params: any) => { 
    this.itemId = params['id']; 
} 

onQueryParams = (data: any) => { 
    this.show = data.show; 
    if(this.show) { 
    this.TitleService.fetchTitle(this.show) 
    } 
} 

Answer 3

在title.service.ts你可以聲明一個名爲title變量，有setter和getter：

title: string =""; 

// replace fetchTitle with setTitle 
// remember to change it in the component too 
setTitle(title) { 
    this.title = title; 
    } 

getTitle() { 
    return this.title; 
    } 

然後，當ResultPage.component被初始化，從TitleService調用getTitle()並將結果設置爲聲明的變量組件。

這是通過共享服務共享數據的example。