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

Question

在我的应用程序中，有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();
      }
    });
  }
}

login.component.ts（UserModule）

    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();
  }
}

问题是观察者没有在我尝试在共享模块中使用MessageService的app.component.ts中进行订阅，但全部如此。 当用户登录时，我该怎么做从LoginComponent（UserModule）向AppComponent发送消息，以便登录按钮可能消失。

Answer 1

每次调用getMessage时都尝试不创建新的可观察对象

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$;
  }
}