2

我创建了 sharedService 它运行良好，我可以将数据从一个组件共享到另一个组件（这两者都是不同模块中的不相关组件）。

  • 数据传输如下：

AdminDashboard.Component（更新值）===> Conference.component（获取新的更新值）

问题：当我刷新我的会议组件时，我失去了价值

事件服务.ts

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';
import { importExpr } from '@angular/compiler/src/output/output_ast';
import {Events} from '../models/event.model'


@Injectable()
export class EventService {
    private dataSource = new BehaviorSubject(null);
    sendMessage(data) {
        this.dataSource.next(data);
    }

    getMessage(): Observable<any> {
        return this.dataSource.asObservable();
    }
}

仪表板.component（网址/仪表板）

on Button Click msg() 方法调用，更新了 BehaviourSubjectvalue。

import { Component, OnInit} from '@angular/core';
import { NgForm } from '@angular/forms';
import { EventService } from '../../shared/sharedServies/eventService.service';

export class AdminDashboardComponent implements OnInit {
 constructor( private testEventService: EventService){ }
  msg() {
    debugger
    this.testEventService.sendMessage('Message from Home Component to App 
    Component!');
  }
}

Conference.component (url /conference) 在这里，我在消息中保存值并绑定到 ui。

import { Component, OnInit } from '@angular/core';
import { EventService } from'../../shared/sharedServies/eventService.service';
import { Subscription } from 'rxjs/Subscription';

export class ViewconferenceComponent implements OnInit {
    message: any;
    constructor(private EventService: EventService) {
        this.subscription = this.EventService.getMessage().subscribe(message => {
            console.log(message)
            this.message = message;
        });
    }

}

问题 ：

  • 当我在 /conference 页面上获取数据时，当我刷新服务持有的值时丢失了，我不明白会发生什么。

  • 我还需要将 json 添加到 sharedService ，它将如何实现？

4

1 回答 1

0

这是意料之中的，因为当您“切换”组件时，它们会被破坏。您可以通过向服务添加状态变量来快速解决此问题。

就个人而言，我鼓励你使用一些状态库，比如 ngRx https://github.com/ngrx/platform

于 2018-08-28T22:17:24.010 回答