在 Angular2 中订阅 EventEmitter 不起作用
Subscribe to EventEmitter in Angular2 not working
我正在学习 Angular 2. 我正在尝试通过单击第一个组件将数据从组件发送到其他组件。
两个组件都是兄弟。
到目前为止,这是我的代码:
第一个组件:
@Component({
selector: 'jsonTextInput',
templateUrl: '../templates/jsonTextInput.html',
directives: [Card, CardTitle, CardDescription, Icon],
providers: [JsonChangeService]
})
export class JsonTextInput {
json: string = '';
constructor (private jsonChangeService: JsonChangeService) {
this.jsonChangeService = jsonChangeService
}
process () {
this.jsonChangeService.jsonChange(this.json)
}
}
这是服务:
import {Injectable, EventEmitter} from '@angular/core';
@Injectable()
export default class JsonChangeService {
public jsonObject: Object;
stateChange: EventEmitter<any> = new EventEmitter<any>();
constructor (){
this.jsonObject = {};
}
jsonChange (obj) {
console.log('sending', obj)
this.jsonObject = obj
this.stateChange.emit(this.jsonObject)
}
}
从第一个组件到服务的调用正在运行,因为正在打印 sending
。
这是第二个组件
@Component({
selector: 'jsonRendered',
templateUrl: '../templates/jsonrendered.html',
directives: [Card, CardTitle],
providers: [JsonChangeService]
})
export class JsonRendered {
private jsonObject: Object
constructor (private jsonChangeService: JsonChangeService) {
this.jsonChangeService = jsonChangeService
this.jsonObject = jsonChangeService.jsonObject
this.jsonChangeService.stateChange.subscribe(json => { this.jsonObject = json; console.log('Change made!') })
}
ngOnInit () {
console.log(1)
}
ngOnChanges () {
console.log(2)
}
renderJson () {
console.log(3)
}
}
订阅 stateChange 中的函数永远不会运行。我错过了什么?
编辑
这是我的 stateChange
EventEmitter 的内容:
_isAsync: true
_isScalar: false
destination: undefined
dispatching: false
hasCompleted: false
hasErrored: false
isStopped: false
isUnsubscribed: false
observers: Array[0]
source:undefined
您有两个不同的 JsonChangeService
实例。这就是为什么您不会在组件之间收到消息的原因。您需要有一个实例服务,即在父组件或顶层,如下所示:
bootstrap(AppComponent, [JsonChangeService])
我正在学习 Angular 2. 我正在尝试通过单击第一个组件将数据从组件发送到其他组件。
两个组件都是兄弟。
到目前为止,这是我的代码:
第一个组件:
@Component({
selector: 'jsonTextInput',
templateUrl: '../templates/jsonTextInput.html',
directives: [Card, CardTitle, CardDescription, Icon],
providers: [JsonChangeService]
})
export class JsonTextInput {
json: string = '';
constructor (private jsonChangeService: JsonChangeService) {
this.jsonChangeService = jsonChangeService
}
process () {
this.jsonChangeService.jsonChange(this.json)
}
}
这是服务:
import {Injectable, EventEmitter} from '@angular/core';
@Injectable()
export default class JsonChangeService {
public jsonObject: Object;
stateChange: EventEmitter<any> = new EventEmitter<any>();
constructor (){
this.jsonObject = {};
}
jsonChange (obj) {
console.log('sending', obj)
this.jsonObject = obj
this.stateChange.emit(this.jsonObject)
}
}
从第一个组件到服务的调用正在运行,因为正在打印 sending
。
这是第二个组件
@Component({
selector: 'jsonRendered',
templateUrl: '../templates/jsonrendered.html',
directives: [Card, CardTitle],
providers: [JsonChangeService]
})
export class JsonRendered {
private jsonObject: Object
constructor (private jsonChangeService: JsonChangeService) {
this.jsonChangeService = jsonChangeService
this.jsonObject = jsonChangeService.jsonObject
this.jsonChangeService.stateChange.subscribe(json => { this.jsonObject = json; console.log('Change made!') })
}
ngOnInit () {
console.log(1)
}
ngOnChanges () {
console.log(2)
}
renderJson () {
console.log(3)
}
}
订阅 stateChange 中的函数永远不会运行。我错过了什么?
编辑
这是我的 stateChange
EventEmitter 的内容:
_isAsync: true
_isScalar: false
destination: undefined
dispatching: false
hasCompleted: false
hasErrored: false
isStopped: false
isUnsubscribed: false
observers: Array[0]
source:undefined
您有两个不同的 JsonChangeService
实例。这就是为什么您不会在组件之间收到消息的原因。您需要有一个实例服务,即在父组件或顶层,如下所示:
bootstrap(AppComponent, [JsonChangeService])