在2個不同模塊的2個組件之間共享數據Angular 4

在我的應用程序中有2個模塊，即AppModule和UserModule。在2個不同模塊的2個組件之間共享數據Angular 4

但我在共享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，以便登錄按鈕可能會消失。

來源

2017-12-18 SHAHRUKH SHAHID

如果定義在兩個模塊的服務，每次都會得到它的一個單獨的實例。 – jonrsharpe

將您的登錄邏輯移入登錄服務本身，因此當您調用服務時，您可以從任何組件/模塊中檢查相同的變量。因爲它現在你有你的應用程序組件中的登錄變量。將它存儲在服務中，並設置一個函數來檢查您是否已經登錄，註銷的功能以及登錄的功能，並且您很有可能去 – Zuriel

@jonrsharpe我已經在共享模塊中定義了消息服務。然後我分別在UserModule和AppModule中導入了共享模塊。難道我做錯了什麼？ –

嘗試沒有創建一個新的觀察到每次調用的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$; 
    } 
}

來源

2017-12-18 13:54:07 David

謝謝你的回答，但很遺憾，說它不起作用。我只在共享模塊中定義了消息服務。然後我分別在UserModule和AppModule中導入了共享模塊。難道我做錯了什麼？ –

在2個不同模塊的2個組件之間共享數據Angular 4

回答

相關問題