Angular 角度2-将数据从子组件(路由器出口内)传递到父组件
我有一个包含以下内容的父容器:Angular 角度2-将数据从子组件(路由器出口内)传递到父组件,angular,typescript,Angular,Typescript,我有一个包含以下内容的父容器: <div id="pageContainer"> <router-outlet></router-outlet> </div> <div> <div class="title">{{text}}</div> </div> 子组件调用服务方法: this.notificationsService.emitChange('Data from ch
<div id="pageContainer">
<router-outlet></router-outlet>
</div>
<div>
<div class="title">{{text}}</div>
</div>
子组件调用服务方法:
this.notificationsService.emitChange('Data from child');
然后父组件从服务分配{{text}}:
constructor(
private notificationsService: NotificationsService
) {
notificationsService.emitChange(
text => {
console.log(text);
});
}
但这仍然不起作用,有什么想法吗?使用Subject来完成此操作
import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject } from "rxjs/Rx";
@Injectable()
export class NotificationsService {
emitChange$: Subject<any> = new BehaviorSubject<any>(null);
constructor() { }
emit(value: any) {
this.emitChange$.next(value);
}
get emitChange(): BehaviorSubject<any> {
return (this.emitChange$ as BehaviorSubject<any>);
}
}
父母
constructor(
private notificationsService: NotificationsService
) {
notificationsService.emitChange.subscribe(
text => {
console.log(text);
});
}
顺便说一句,如果您的子组件直接在父组件中使用,您可以使用EventEmitter在它们之间进行通信。父组件中有文本属性吗?为什么要在路由器出口内传递数据?有没有具体的原因?如果在父组件中使用了子组件,则可以使用EventEmitter来传递数据。@KerimEmurla,因为我必须在整个应用程序中多次显示通知框,而且只需从任何位置向其传递一些数据似乎都有意义。这是初始值,您是否使用此代码调用函数
this.notificationsService.emit('Data from child')代码>是,我在ngOnInit()上的子组件上尝试了它
this.notificationsService.emit('Data from child');
constructor(
private notificationsService: NotificationsService
) {
notificationsService.emitChange.subscribe(
text => {
console.log(text);
});
}