繁体   English   中英

在同级组件Angular 5之间传递对象{}

[英]Passing object { } between sibling components Angular 5

我不确定我在做什么错...

基本上,我有2个同级组件,第一个组件获取一些数据,我想与同级组件共享该数据,因此我已经提供了服务

服务

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

@Injectable()
export class DataService {
    // Individual Data Source
    private dataSource = new BehaviorSubject<Object>({});
    // Individual Data Source
    data = this.dataSource.asObservable();
    // Individual Data Source
    updateData(data) {
        this.dataSource.next(data);
    }
}

然后在我的第一个组件中...

this.activatedRoute.params.subscribe(params => {
  this.id = params.id;
  this._dataNotification.getSingledataNotification(this.id)
    .subscribe(result => {
      this.data = result;
      this._dataService.updateData(this.data);
    });
});

然后在我的第二部分。

getData() {
    this._dataService.data.subscribe((result) => {
        this.data = result;
        console.log(this.data);
    });
}

基本上发生了什么事是在我的第一个组件中获取数据对象并将其传递给updateData函数,然后在我的第二个组件中获取数据,但是当我控制台日志时,我仅获取了一个空对象?

有什么想法我做错了吗?

编辑

我将updateData函数放入onChanges生命周期事件中,现在它可以工作了。

多谢你们

这个创建了一个服务来处理消息事件。

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

@Injectable()
export class MessageService {
  private subject = new Subject<Message>();

  send(key: string, value: any) {
    this.subject.next({ key, value });
  }

  get(): Observable<Message> {
    return this.subject.asObservable();
  }
}

class Message {
  constructor(
    public key: string,
    public value: any) { }
}

这个侦听事件,并在事件得到执行时执行。

import { Subscription } from 'rxjs/Subscription';
private subscription: Subscription;

constructor(
  private messageService: MessageService,
) {}

ngOnInit() {
  this.subscription = this.messageService.get().subscribe(message => {
    if (message.key === 'what message you want') {
      this.dosth()
    }
  });
}

当您要将对象从一项服务发送到另一项服务时,请调用消息服务中的send并订阅所需的服务。

当我不得不实施相同的方案时,我遇到了类似的问题。

解决方案是,您不应在onInit()方法内的接收组件中接收数据。 而是通过onChanges()方法或通过事件(如按钮click )接收它。 它将返回带有值的对象。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM