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