如何创建一个服务来检索共享值

Question

我有一个Angular 13应用，我有一个UserRole服务

但是我无法得到这个对象的值。我调用了主组件中的服务，但是当我得到结果时，我的结果是undefined

@Injectable({
providedIn: 'root'
})
export class UserRoleService {
_userRole!: UserRole;
get userRole(): UserRole {
if (!this._userRole) {
this.getUserRole();
}
return this._userRole;
}
getUserRole(): any {
this._httpClient.get<UserRole>(this.requestUrlBase+ "/role", { headers: this.h }).subscribe({
next: (res: UserRole) => {
this._userRole = res;
},
});
}

@Component({
selector: 'app-root',
providers: [UserRoleService],
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
...
role!: UserRole;

constructor(userRoleService: UserRoleService, ...,) {
}
ngOnInit(): void {
this.userRoleService.getUserRole();
...
this.role = this.userRoleService.userRole;
}

Answer 1

改变你的getUserRole方法返回一个承诺，而不是像

import { lastValueFrom } from 'rxjs';
export class UserRoleService {
_userRole!: UserRole;
async getUserRole(): Promise<UserRole> {
if(!!this._userRole){
return Promise.resolve(this._userRole);
}
let userRole= this._httpClient.get<UserRole>(this.requestUrlBase+ "/role", { headers: this.h });
this._userRole=await lastValueFrom(userRole);
return Promise.resolve(this._userRole);
}
}

然后等待承诺在你的组件

中解析

this.userRoleService.getUserRole().then((role)=>{
this.role=role;
})

如果你没有使用最新版本的rxjs和lastValueFrom是不可用的，那么使用toPromise代替

let userRole= this._httpClient.get<UserRole>(this.requestUrlBase+ "/role", { headers: this.h }).toPromise();
this._userRole=await userRole;

Answer 2

这个函数getUserRole()是异步函数-它发送HTTP请求，所以当然它不会填充变量当你返回它-return this._userRole;

我建议在服务中按如下方式存储Observable:

_userRole: Observable<UserRoll> = this._httpClient.get<UserRole>(this.requestUrlBase+ "/role", { headers: this.h })

和subscribe到组件

内部的值如果你只想向服务器发出一个请求，你可以这样做:服务中:

getUserRole(): any {
if (!!this._userRole) {
return of(this._userRole) 
}
return this._httpClient.get<UserRole>(this.requestUrlBase+ "/role", { 
headers: this.h }).pipe(
tap(user => this._userRole = user)
)

这样你只会在没有用户

的情况下发出HTTP请求