在两个 angular2 组件打字稿文件之间传递值

Question

我有两个不是父子组件的组件，但我需要将值从组件 A 传递到组件 B。

示例：

src/abc/cde/uij/componentA.ts 有变量 CustomerId = "ssss"

需要将该变量 customerID 传递给 src/abc/xyz/componentB.ts

Answer 1

简单示例：

组件 A：

@Component({})
export class ComponentA {
    constructor(private sharedService : SharedService) {}

    sendMessage(msg : string) {
       this.sharedService.send(msg);
    }
}

组件 B：

@Component({})
export class ComponentB {
    constructor(private sharedService : SharedService) {
       this.sharedService.stream$.subscribe(this.receiveMessage.bind(this));
    }

    receiveMessage(msg : string) {
       console.log(msg); // your message from component A
    }
}

共享服务：

@Injectable()
export class SharedService {
    private _stream$ = new Rx.BehaviorSubject("");
    public stream$ = this._stream$.asObservable();

    send(msg : string) {
      this._stream$.next(msg);
    }
}

共享服务必须放在同一个NgModule。

Answer 2

在您的服务上定义setMyProperty() 和getMyProperty()。然后 setMyProperty 使用来自 Component A 的值。 ComponentB 然后 getMyProperty 你返回的值...

您必须将服务注入到两个组件中。

Answer 3

你可以试一试。它非常简单直接。

我只是按照THIS 的示例进行了一些更改，以便它可以是兄弟姐妹而不是父母/孩子。

my-service.service.ts

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

@Injectable()
export class MyService {
  // Observable string sources
  private myAnnouncedSource = new Subject<string>();

  // Observable string streams
  myAnnounced$ = this.myAnnouncedSource.asObservable();

  // Service message commands
  announceItem(item: string) {
    this.myAnnouncedSource.next(item);
  }
}

my-comp1.component.ts

import { Component }          from '@angular/core';
import { MyService }     from './my-service.service';
@Component({
  selector: 'my-compA',
  template: `...`,
  providers: [MyService]
})
export class MyComponentA {

  constructor(private myService: MyService) {

  }
  announceToOtherComps() {
    let sharedItem = "shibby";
    this.myService.announceItem(sharedItem);
  }
}

my-comp2.component.ts

import { Component, Input, OnDestroy } from '@angular/core';
import { MyService } from './my-service.service';
import { Subscription }   from 'rxjs/Subscription';
@Component({
  selector: 'my-compB',
  template: `...`,
  providers: [MyService]
})
export class MyComponentB implements OnDestroy {

  sharedItem = '<no data>';
  subscription: Subscription;

  constructor(private myService: MyService) {
    this.subscription = myService.myAnnounced$.subscribe(
      item => {
        this.sharedItem = item;
    });
  }

  ngOnDestroy() {
    // prevent memory leak when component destroyed
    this.subscription.unsubscribe();
  }
}

Answer 4

<component-a [id]="product.id"></component-a>

在component-a ts文件中。像下面这样使用它

export class ComponentA implements OnInit {

@Input() // <------------
 id: number;

 (...)
}