将整个对象从一个组件发送到另一个组件，角度为2

Question

我有个问题。 我不知道如何将对象从一个组件发送到另一个组件。

在第一个组件Cinema.component.html中，我具有以下函数调用：

<a title="Reserve" (click)="openReservationPage(repertoire)">Reserve</a> 

在Cinema.component.ts文件中，对于该.html，我有类似以下内容：

openReservationPage(repertoire: UpcomingRepertoire) {
    this.router.navigate(['/reserve', {repertoire: JSON.stringify(repertoire)}]);
}

我的app.routes.ts文件包含适当的路由：

{ path: 'reserve', component: ReserveFormComponent }

如何在另一个页面reserve-form.component.ts和reserve-form.component.html中使用此曲目对象？

Answer 1

作为标题中问题的答案，我会说创建一个在组件之间传递数据的服务。

由于是路由器实现，因此您可以将曲目作为路由参数传递。

跟着这些步骤：

1）在app.routes.ts中修改路线以获取参数

{ path: 'reserve/:repertoire', component: ReserveFormComponent }

2）在cinema.component.ts中将曲目作为参数传递

this.router.navigate(['/reserve',JSON.stringify(repertoire)]‌​);

3）在reserve-form.component.ts中提取参数

首先，您需要导入

 import {ActivatedRoute } from "@angular/router";

技术1

repertoire:any;

constructor(private activatedRoute: ActivatedRoute) {
    this.repertoire = JSON.parse(activatedRoute.snapshot.params["repertoire"]);
  }

技术2

import { Subscription } from "rxjs/Rx";

private subscription: Subscription;
repertoire:any;

constructor(private activatedRoute: ActivatedRoute) {
    this.subscription = activatedRoute.params.subscribe(
      (param: any) => this.repertoire = JSON.parse(param['repertoire'])
    );
  }

  ngOnDestroy() { // here we unsubscribe to the observable
    this.subscription.unsubscribe();
  }

进一步说明 ：

当您确定每次导航到组件时都会传递参数时，将采用技术1 。

一旦发布了一个参数， 技术2就是对可观察对象的订阅，但是不要忘记取消订阅ngOnDestroy（）组件的生命周期方法以防止内存泄漏。

最好使用这种方法，因为有时在创建参数后将参数传递给组件的情况下，快照方法将无法捕获，并且在不同的情况下它比技术1中的基本方法更灵活。

Answer 2

下面的链接说明了如何执行此操作。 我最近使用它来创建消息传递服务。 下面的示例显示了简单消息传递服务的代码。 它允许您在组件之间传递一个数字，只需将其更改为。 您也可以写出本地存储，但是服务似乎更受欢迎。 一旦掌握了它们，它们就很容易重复使用。

希望这可以帮助

在角度组件之间共享数据-四种方法

消息服务（PmMessageService）

import { Injectable } from '@angular/core';
import { BehaviorSubject }    from 'rxjs/BehaviorSubject';

@Injectable()
export class PmMessageService
{

  private pillMenuIndexBS = new BehaviorSubject <number> (null);

  pillMenuIndex = this.pillMenuIndexBS.asObservable();

  constructor() {}

  setPillMenuIndex(index : number)
  {
    this.pillMenuIndexBS.next(index);
  }

}

消耗组件的消息服务，设置一个值

import { Component, OnInit } from '@angular/core';
import { PmMessageService } from '../pm-message-service/pm-message.service'
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
  selector: 'app-pm-configure',
  templateUrl: './pm-configure.component.html',
  styleUrls: ['./pm-configure.component.css']
})

export class PmConfigureComponent implements OnInit
{

  constructor (private messageService : PmMessageService) {}

  ngOnInit()
  {
    this.messageService.setPillMenuIndex(1);
  }

}

组件消耗和订阅。

import { Component, OnInit } from '@angular/core';
import { PmMessageService } from '../pm-message-service/pm-message.service'
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

@Component({
  selector: 'pm-bs-navbar',
  templateUrl: './pm-bs-navbar.component.html',
  styleUrls: ['./pm-bs-navbar.component.css']
})

export class PmBsNavbarComponent implements OnInit
{

  tabActiveNumber;

  constructor (private messageService : PmMessageService) {}

  ngOnInit()
  {
    this.messageService.pillMenuIndex.subscribe(index => this.tabActiveNumber = index)
  }

}