[英]Passing value between two angular2 component typescript files
I have two components that are not parent and child components but i need to pass value from component A to component B.我有两个不是父组件和子组件的组件,但我需要将值从组件 A 传递到组件 B。
example:例子:
src/abc/cde/uij/componentA.ts has variable CustomerId = "ssss" src/abc/cde/uij/componentA.ts 有变量 CustomerId = "ssss"
need to pas that variable customerID to src/abc/xyz/componentB.ts需要将该变量 customerID 传递给 src/abc/xyz/componentB.ts
Simple example:简单的例子:
Component A:组件 A:
@Component({})
export class ComponentA {
constructor(private sharedService : SharedService) {}
sendMessage(msg : string) {
this.sharedService.send(msg);
}
}
Component B:组分 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
}
}
Shared service:共享服务:
@Injectable()
export class SharedService {
private _stream$ = new Rx.BehaviorSubject("");
public stream$ = this._stream$.asObservable();
send(msg : string) {
this._stream$.next(msg);
}
}
Shared service have to be placed in the same NgModule
.共享服务必须放在同一个
NgModule
。
On your service define a setMyProperty()
and a getMyProperty()
.在您的服务上定义一个
setMyProperty()
和一个getMyProperty()
。 Then setMyProperty with a value from Component A. ComponentB then getMyProperty where you return the value...然后 setMyProperty 与来自组件 A 的值。 ComponentB 然后 getMyProperty 在那里您返回值...
You have to inject the service into both components.您必须将服务注入到两个组件中。
You could give this a shot.你可以试一试。 Its pretty simple and straight forward.
它非常简单直接。
I just followed THIS example and made some changes so that it could be siblings talking instead of parent/child.我只是按照这个例子进行了一些更改,以便它可以是兄弟姐妹而不是父母/孩子。
my-service.service.ts我的服务.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我的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我的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();
}
}
<component-a [id]="product.id"></component-a>
In the component-a ts file .Use it like below在组件-a ts 文件中。使用如下
export class ComponentA implements OnInit {
@Input() // <------------
id: number;
(...)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.