Блог

Я довольно новичок в angular. У меня есть два компонента, а именно компонент заголовка и профиля. Компонент заголовка обрабатывает функциональность входа в систему и поддерживает две информации — данные пользователя, которые являются объектом json, и isLoggedIn, который является логическим значением, которое сохраняет текущее состояние входа в систему. Общий макет страницы профиля-

 <header-component>
<profile-component>
  

Теперь, поскольку компонент заголовка обрабатывает вход в систему. Я хочу избежать повторного написания логики для получения пользовательских данных и статуса isLoggedIn для компонента profile. Итак, я решил написать общую службу под названием profile service, чтобы я мог загружать пользовательские данные и регистрироваться из заголовка и получать доступ к этой информации в компоненте profile. Входные данные в метод loginlogout поступают из компонента заголовка.

Код SharedService —

 import { Injectable } from '@angular/core';
import { HttpService } from './https.service';
import { Observable, BehaviorSubject, of as observableOf } from 'rxjs';
import * as _ from 'lodash';
import { HttpHeaders, HttpParams } from '@angular/common/http';
import { BaseService } from './base.service';

@Injectable()
export class ProfileServices{
    constructor(){};

    userDetailsBS = new BehaviorSubject<any>('original value');
    userDetails= this.userDetailsBS.asObservable();
    isLoggedIn:boolean;

    loginlogout(userDetails:any , isLoggedIn:boolean){
        this.userDetails=userDetails;
        this.userDetailsBS.next(this.userDetails);
        console.log("Value of user details set in profile service",this.userDetails); //debug
        console.log(".getValue() method:",this.userDetailsBS.getValue()); //debug
        this.isLoggedIn=isLoggedIn;
    }

    getUserDetails(){
        
        return this.userDetailsBS.getValue();
    }
    
}
  

После входа в систему из заголовка-component.ts я вызываю метод loginlogout в службе профилей для установки значений. Я также попытался получить доступ к значению, переданному общей службе, используя getUserDetails, который показывает, что объект UserDetails правильно передается общей службе.

Проблема возникает, когда я пытаюсь получить доступ к данным из компонента профиля-

 export class ProfileT1Component implements OnInit {
    
    userDetails:any;
    constructor(
        public profileService: ProfileServices){
          this.profileService.userDetails.subscribe((result)=>{
            console.log(result);
            this.userDetails=resu<
            console.log("received user details in profile component constructor: ", this.userDetails);
          })
    
      }
    }
  

результат по-прежнему показывает «исходное значение», а не обновленное значение. Это вообще неправильный подход или я неправильно обрабатываю наблюдаемые. Помощь была бы очень признательна.

Вам нужно внести пару изменений в свой сервис, чтобы он заработал. Добавьте providedIn: root и удалите все объявления из других модулей. Во-вторых, вам не нужно this.userDetailsBS.asObservable() , и вы можете использовать subscribe напрямую userDetailsBS . Ваш код будет выглядеть примерно следующим образом.

Обслуживание:

 @Injectable({
    providedIn: 'root'
})
export class ProfileServices {
    constructor() {}

    userDetailsBS = new BehaviorSubject<any>('original value');
    isLoggedIn: boolean;

    loginlogout(userDetails: any, isLoggedIn: boolean) {
        this.userDetailsBS.next(userDetails);
        this.isLoggedIn = isLoggedIn;
    }

    getUserDetails() {
        return this.userDetailsBS.getValue();
    }
}
  

Компонент:

 export class ProfileT1Component implements OnInit {
    userDetails: any;
    constructor(public profileService: ProfileServices) {
        this.profileService.userDetailsBS.subscribe((result) => {
            console.log(result);
            this.userDetails = resu<
            console.log('received user details in profile component constructor: ', this.userDetails);
        });
    }
}
  

реализация, похоже, в порядке

(за исключением того, что вы должны сделать BehaviorSubject закрытым и предоставлять только наблюдаемое)

возможно, у вас есть несколько экземпляров службы.

попробуйте добавить :

 @Injectable({
  providedIn: 'root',
})
  

и удалите объявление службы из всего массива поставщиков модулей

https://angular.io/guide/singleton-services