Javascript 在两个angular2组件typescript文件之间传递值

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

例如：

src/abc/cde/uij/componentA.ts具有变量CustomerId=“ssss”

---

需要将该变量customerID赋给服务上的src/abc/xyz/componentB.ts

定义一个

setMyProperty（）

和一个

getMyProperty（）

。然后使用组件a中的值设置MyProperty。组件B然后使用getMyProperty返回值

---

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

在服务上定义一个

setMyProperty（）

和一个

getMyProperty（）

。然后使用组件a中的值设置MyProperty。组件B然后使用getMyProperty返回值

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

简单示例：

组件A:

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

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

@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);
    }
}

组件B:

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

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

@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);
    }
}

共享服务：

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

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

@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

简单示例：

组件A:

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

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

@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);
    }
}

组件B:

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

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

@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);
    }
}

共享服务：

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

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

@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

中，您可以试一试。它非常简单和直接

我只是照着这个例子做了一些修改，这样就可以让兄弟姐妹而不是家长/孩子说话了

我的服务.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);
  }
}

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);
  }
}

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();
  }
}

my-comp2.component.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);
  }
}

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);
  }
}

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();
  }
}

从'@angular/core'导入{Component，Input，OnDestroy}；
从“/MyService.service”导入{MyService}；
从'rxjs/Subscription'导入{Subscription}；
@组成部分({
选择器：“我的公司”，
模板：`…`，
提供者：[MyService]
})
导出类MyComponentB实现OnDestroy{
sharedItem=''；
认购：认购；
构造函数（私有myService:myService）{
this.subscription=myService.mypublished$.subscription(
项目=>{
this.sharedItem=项目；
});
}
恩贡德斯特罗（）{
//防止组件损坏时内存泄漏
this.subscription.unsubscripte（）；
}
}

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

我只是照着这个例子做了一些修改，这样就可以让兄弟姐妹而不是家长/孩子说话了

我的服务.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);
  }
}

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);
  }
}

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();
  }
}

my-comp2.component.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);
  }
}

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);
  }
}

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();
  }
}

从'@angular/core'导入{Component，Input，OnDestroy}；
从“/MyService.service”导入{MyService}；
从'rxjs/Subscription'导入{Subscription}；
@组成部分({
选择器：“我的公司”，
模板：`…`，
提供者：[MyService]
})
导出类MyComponentB实现OnDestroy{
sharedItem=''；
认购：认购；
构造函数（私有myService:myService）{
this.subscription=myService.mypublished$.subscription(
项目=>{
this.sharedItem=项目；
});
}
恩贡德斯特罗（）{
//防止组件损坏时内存泄漏
this.subscription.unsubscripte（）；
}
}

在component-a ts文件中。如下所示使用它

export class ComponentA implements OnInit {

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

 (...)
}

导出类组件A实现OnInit{
@Input（）/


在component-a ts文件中。如下所示使用它

export class ComponentA implements OnInit {

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

 (...)
}

导出类组件A实现OnInit{
@输入（）//使用共享服务@GünterZöchbauer那里说使用输入绑定在父级和子级之间传递数据，但这里的情况不同。你应该阅读第一段；-）@GünterZöchbauer是的，我做了，但我仍然没有了解不是父级和子级的不同组件之间的传递值。使用共享服务Service@GünterZöchbauer那里说使用输入绑定在父级和子级之间传递数据，但这里的情况不同。你应该读过第一段；-）@GünterZöchbauer是的，我读过了，但我仍然不了解不是父级和子级的不同组件之间的传递值。这对我有效。但是，我可以ldn无法导入Rx.BehaviorSubject。因此我使用：从'rxjs/BehaviorSubject'导入{BehaviorSubject}；私有_stream$=new BehaviorSubject（“”）；如何将JSON数组发送到一个组件到另一个组件这对我来说很有效。但是，我无法导入Rx.BehaviorSubject。因此我使用：导入{BehaviorSubject}来自'rxjs/BehaviorSubject'；private _stream$=new BehaviorSubject（“”）；如何将JSON数组发送到一个组件到另一个组件