在 angular 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 }

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

Answer 1

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

希望对您有所帮助

Sharing Data Between Angular Components - Four Methods

消息服务 (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)
  }

}

Answer 2

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

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

按照以下步骤操作：

1)修改app.routes.ts中的路由取一个param

{ 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"]);
  }

技巧二

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 中的基本场景更灵活。

在 angular 2 中将整个对象从一个组件发送到另一个组件

Sending whole object from one component to another in angular 2

javascript

angular2-routing

angular