在 2 个不同模块的 2 个组件之间共享数据 Angular 4答案

【问题标题】：Sharing data between 2 components of 2 different modules Angular 4在 2 个不同模块的 2 个组件之间共享数据 Angular 4
【发布时间】：2017-12-18 21:54:07
【问题描述】：

在我的应用程序中有 2 个模块，即 AppModule 和 UserModule。

但我在 AppComponent 和 LoginComponent（UserModule 的一部分）之间共享数据时遇到了问题。

这里是 app.component.html

<ul class="nav navbar-nav lg-nav visible-lg visible-md">
        <li><a routerLinkActive="nav-active" routerLink="/page1">page1</a></li>
        <li><a routerLinkActive="nav-active" *ngIf="!loggedIn" routerLink="/user/login">Login</a></li>

</ul>

app.component.ts

    import { MessageService } from './services/message.service';
   export class AppComponent {
    loggedIn = false;
    constructor(private ms: MessageService, private cd: ChangeDetectorRef) {
      this.ms.getMessage().subscribe(data => {
      console.log('messageService: ', data);
      if (data === 'login') {
        this.loggedIn = !this.loggedIn;
        this.cd.detectChanges();
      }
    });
  }
}

    constructor(
     private ms: MessageService
    ) {}
    -> call to login service
    -> on success response
    this.ms.sendMessage('login');

message.service.ts

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class MessageService {
  private message = new Subject<any>();
  constructor() {}
  sendMessage(message) {
    this.message.next({ message: message });
  }
  clearMessage() {
    this.message.next();
  }
  getMessage() {
    return this.message.asObservable();
  }
}

问题是观察者没有在 app.component.ts 中被订阅我尝试在共享模块中使用 MessageService，但一切都在脉络中。当用户登录时，我该怎么做才能从 LoginComponent(UserModule) 向 AppComponent 发送消息，以便登录按钮可能会消失。

【问题讨论】：

如果你在两个模块中定义服务，每个模块都会得到一个单独的实例。
将您的登录逻辑移动到登录服务本身，因此当您调用该服务时，您可以从任何组件/模块中检查相同的变量。就目前而言，您的应用程序组件中有您的登录变量。将其存储在服务中并设置一个功能来检查您是否已登录，一个功能来注销，一个功能来登录，你很好去
@jonrsharpe 我只在共享模块中定义了消息服务。然后我分别在 UserModule 和 AppModule 中导入了共享模块。我做错了吗？
在这里查看stackoverflow.com/questions/47098986/…。也许您应该尝试将该服务从共享模块中移出到您的核心模块中，这样它就不会被定义两次

标签： javascript angular typescript rxjs

【解决方案1】：

尝试在每次调用 getMessage 时不要创建新的 observable

import { Injectable } from '@angular/core';
import { Observable, Subject } from 'rxjs';
@Injectable()
export class MessageService {
  private message = new Subject<any>();
  private messageEvent$ = this.message.asObservable();
  constructor() {}
  sendMessage(message) {
    this.message.next({ message: message });
  }
  clearMessage() {
    this.message.next();
  }
  getMessage() {
    return this.messageEvent$;
  }
}

【讨论】：

感谢您的回答，但很抱歉没有奏效。我只在共享模块中定义了消息服务。然后我分别在 UserModule 和 AppModule 中导入了共享模块。我做错了吗？