Javascript Angular 2共享服务将数据传递到组件到组件

我正在尝试将

this.title

的字符串值从我的LandingPage.component传递到我的ResultPage.component

我检索

列表。显示

值，并将其发送到我的

标题服务

，如我的：

landingpage.component.html

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

上面将

列表。显示
值发送到my:

title.service.ts

以下是我如何在我的系统中管理路由：

app-routing.module.ts

我的问题

一旦我在我的服务组件中收到
标题.show
值，我不确定如何将其发送到我的接收组件（resultpage.component）

如何将我的
标题
值从我的服务发送到我的ResultPage.component？
使标题成为服务的公共属性，如下所示：

// 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.
  }
}

然后，任何其他组件都可以注入此服务并访问
此.titleService.selectedTitle
使标题成为服务的公共属性，如下所示：

// 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.
  }
}

然后任何其他组件都可以注入此服务并访问
此.titleService.selectedTitle
关注点分离。。。登录页用于选择列表项并导航到结果页。就让它这么做吧。让ResultPage.component完成其余的工作。注意：其他答案建议将最后一个标题的值存储在TitleService中。在服务中存储状态不是一个好主意。那么TitleService就不能作为一种通用的方式来获取任何与当前导航分离的标题，而不会产生副作用

删除（单击）事件。将“show”添加为查询参数

landingpage.component.html

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

关注点分离。。。登录页用于选择列表项并导航到结果页。就让它这么做吧。让ResultPage.component完成其余的工作。注意：其他答案建议将最后一个标题的值存储在TitleService中。在服务中存储状态不是一个好主意。那么TitleService就不能作为一种通用的方式来获取任何与当前导航分离的标题，而不会产生副作用

删除（单击）事件。将“show”添加为查询参数

landingpage.component.html

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

在
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（）
，并将结果设置为组件中声明的变量

下面是一个通过共享服务共享数据的示例。
在
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（）
，并将结果设置为组件中声明的变量

下面是一个通过共享服务共享数据的示例。
您是否想过使用redux而不是使用服务？您是否想过使用redux而不是使用服务？谢谢！这也是一个很好的方法，我试过了，效果很好。我不确定你的答案和DeborahK的答案之间的最佳做法是什么。但这两个都很好，谢谢！这也是一个很好的方法，我试过了，效果很好。我不确定你的答案和DeborahK的答案之间的最佳做法是什么。但这两种方法都很有效。
title: string ="";

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

getTitle() {
    return this.title;
  }