Question

我有两个服务配置，auth，其代码类似于：

public init = (): Observable<AppConfig> => {
    return this._http.post(this.actionUrl, JSON.stringify(this.APP_CONFIG), { headers: this.headers })
      .map((response: Response) => response.json() as AppConfig)
      .catch(this.handleError);
  }

这两个服务在一个最终服务中调用，将在我的Angular 5应用程序中的每个组件上调用：

@Injectable()
export class PageService {

  constructor(private configService: ConfigService, private authService: AuthService) { }

  config: AppConfig;
  auth: Auth;
  grants: Grants;

  init() {
    Observable.forkJoin(
      this.configService.init(),
      this.authService.init(),
      this.authService.grants())
      .subscribe(
      data => {
        this.config = data[0];
        this.auth = data[1];
        this.grants = data[2];

        // Logs
        console.log(this.config);
        console.log(this.auth);
        console.log(this.grants);
      });
  }
}

以下是我在我的组件中调用它的方式：

export class DashboardComponent implements OnInit {
  columns: any[];

  constructor(private pageService: PageService) { }

  ngOnInit() {
    this.pageService.init();
    this.userAccessPanel();
  }

  userAccessPanel = () => {
    console.log('Grant : ', this.pageService.grants);
  }
}

问题是this.pageService.grants显示未定义我猜是因为在我从服务器获取数据之前调用了它。但在那种情况下，我无法在互联网上找到解决问题的方法。

如何确保this.userAccessPanel()完成并从服务器获取所有数据后，如何启动this.pageService.init()？

提前感谢

Answer 1

init（）必须返回一个可观察的

init() {
return Observable.forkJoin(
  this.configService.init(),
  this.authService.init(),
  this.authService.grants())
  .map(([config,auth,grants])=>{config,auth,grants})
 }

然后在你的其他组件中

ngOnInit() {
this.pageService.init()
.map(obj=>this.userAccessPanel(obj.grants)).subscribe()
 }

 userAccessPanel = (grants) => {
console.log('Grant : ', grants);
 }

Observable等待具有多个observable的函数完成

1 个答案: