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

Z时代
2024-01-10
分类：问答

在我的应用程序中有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，以便登录按钮可能会消失。

回答：

尝试没有创建一个新的观察到每次调用的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$; 
    } 
}