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