在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，以便登录按钮可能会消失。

如果定义在两个模块的服务，每次都会得到它的一个单独的实例。 – 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$; 
    } 
}

谢谢你的回答，但很遗憾，说它不起作用。我只在共享模块中定义了消息服务。然后我分别在UserModule和AppModule中导入了共享模块。难道我做错了什么？ –

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

相关推荐