更新

Question

我的服务构造函数中包含此代码：

this.getUser().subscribe( data => this.user = data.text(), error => console.log(error) );

在我的应用程序中使用路由器链接（从菜单）导航时，此代码可以正常工作，但手动刷新页面时... data.text（）包括登录用户（如果我将其打印到控制台，我可以看到它）但是this.user变量没有保存它并且它仍然是未定义的＆＃34;！

到目前为止，我尝试使用setTimeout或BehaviorSubject，但没有运气：

private _subject = new BehaviorSubject<any>([]);
subject$ = this._subject.asObservable();
this.getUser().subscribe( data => 
        //setTimeout(() => { this.user = data.text() }, 1000),
          this.user = this._subject.next(data),
                error => console.log(error) );

更新

app.component.ts

import { Component, ViewEncapsulation, Output, EventEmitter } from '@angular/core';
import { ResourcesService } from './services/resources.service';
import { PrivilegeService } from './services/privilege.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
user: string;
constructor(
        private resourcesService: ResourcesService,
        private privilegeService: PrivilegeService
        ) { 

    if (Config.PROD_MODE)
        resourcesService.getUser().subscribe( data => {
            this.user = data.text(); 
            resourcesService.user = data.text();
        }, error => {console.log(error);

resource.service.ts：

  constructor(public http: Http){ 
  this.headers = new Headers({ 'Content-Type': 'application/json', 'Accept': 'application/json' });
  this.options = new RequestOptions({ headers: this.headers});}


/**
 * Get current user
 */
getUser(){
    let url = this.url + "user";  

    return this.http.get(url)
        //.catch( (error: any) => { console.log(error); return Observable.empty<Response>();} );
        .catch( (error: any) => Observable.throw(error || 'Server Error - could not get user') );
}

privilege.service.ts：

@Injectable()
export class PrivilegeService extends ResourcesService {
constructor(public http: Http){ 

  super(http);

  this.user = '';

资源list.component：

public constructor(private resourcesService: ResourcesService,
                    private privilegeService: PrivilegeService, 
                    private router: Router, private route: ActivatedRoute) {

    if (Utils.isEmpty(this.resourcesService.user)){
        this.resourcesService.getUser().subscribe( data => {
            this.resourcesService.user = data.text();
            this.callGetResources();
        }, error => console.log(error) );
    }
}

我尝试在可观察区块中调用获取资源，现在我得到了：

错误错误：InvalidPipeArgument：＆＃39;＆＃39; for pipe＆＃39; AsyncPipe＆＃39; at invalidPipeArgumentError（common.es5.js：2610） at AsyncPipe.webpackJsonp ... / .. / .. / common /@angular/common.es5.js.AsyncPipe._selectStrategy（common.es5.js：2755）

我意识到在设置resources.service的用户变量之前执行了对getResources（）的调用：

在app.component中执行了对getUser（）的调用，但数据仍未准备就绪。在调试时我可以看到如下数据：

消息：＆＃34;意外的输入结束＆＃34; 堆：＆＃34; SyntaxError：新AppComponent（http://localhost:8080/DataFabResourceManager/dist/main.bundle.js:247:9）的意外输入结束↵

然后从资源列表页面（我刷新时站立的那个页面）执行对getResources（）的调用。但此时用户仍未定义
回到app.component，现在数据准备就绪，资源服务的用户变量已经过了（但为时已晚）：

200 状态文本：＆＃34; OK＆＃34; 类型： 2 网址：＆＃34; http://localhost:8080/DataFabResourceManager/management/user＆＃34; _身体：＆＃34; regressiontester_db＆＃34; 的原

Answer 1

尝试执行以下操作：

在你的服务创建函数中，它将返回observable：

getUser() {
    return http.get('here your rest api link to back-end');
}

然后从组件中调用该方法，例如从ngOnInit（）方法调用该方法。（你可以点击angular.io的官方指南）：

ngOnInit() {
    this.service.getUser().subscribe('here your subscribe logic'); 
}

还将HttpClient作为构造函数param提供给您的服务。然后通过构造函数将您的服务提供给组件。

有用的链接：

https://angular.io/guide/dependency-injection

https://angular.io/guide/dependency-injection-pattern

HTTP： https://angular.io/api/common/http/HttpClient

手动刷新页面时，Observable不保存数据

更新

1 个答案: