Angular 初始荷载设置角度2

我在开发angular2应用程序的架构方面遇到了另一个问题。我有一个需要通过web API调用的设置。我有一个管道，它取决于该设置。既然http.get的本质是异步的，那么在对web API的调用完成时，有什么方法可以停止管道加载呢

例如：

import {Component, OnInit} from 'angular2/core'
import {myPipe} from './myPipe'
import {settingService} from './setting.service'

@Component({
 template:'{{"setting.val1" | myPipe}}',
 providers:[settingService],
 pipes:[myPipe]
})

export class mainComponent implements OnInit{
  constructor(private _myService:settingService){}

  ngOnInit(){
       this._myService.getSetting() //this needs to complete first before the pipe executes
  }
}

如您所见，string settings.val1将通过管道进行转换。但是，在管道开始转换之前，需要首先完成对这个.u myService.getSetting（）的调用。我的问题是如何在getSetting（）调用完成之前阻止管道执行

谢谢

更新：

设置服务代码如下：

export class SettingService{
  constructor(private _http:http){}

  public getSetting():void{
    this._http.get('someAPI')
    .map((result)=>{return result.toJSON()})
    .subscribe((data:any)=>{localStorage.setItems("settings",json.stringify(data))})
  }
}

因此，服务基本上调用web api并将其存储在localStorage中。管道只需要解析localStorage中的值并调用对象

这意味着如果字符串作为setting1.val1传入，管道中的转换函数将

transform(val,args){
  let settings = json.parse(localStorage("settings"))
  return eval("settings." + val); //in this instance, it will execute settings.setting.val1
}

---

事实上，我会完全忽略管道中的

localStorage

，而只与

SettingService

通信，并将

SettingService

更改为仅从服务器加载数据，前提是这些数据尚未存储在

localStorage

中或类似位置（不知道您的要求）.

如果

这一点。_myService.getSetting（）

返回可观察到的或承诺。您可以使用

AsyncPipe

这就是它的用途。@Abdulrahman getSetting确实返回observable。为了简洁起见，我省略了。当你说使用asyncPipe时，我该如何使用它？我只是把它和我的自定义的链接起来吗？如果你在问题中包含

getSetting

代码会更好。但是，假设你有一个可观察的，它会是这样的：

settings | async | myPipe

@Abdulrahman实际上我没有返回可观察的。该函数实际上是调用http.get并将结果存储在localStorage中。您可以检查更新的代码above@Gunther然后在管道里只有回报的承诺。如何得到实际值？我希望Angular能自动处理，不是吗？显然它不能。报税表将采用Promise类型。我对您的代码做了一些更改。在我的plunkr示例中，您可以在控制台中看到plunkr中提供，在结果之前先打印开始和结束。因此，它抛出了一个错误。我需要知道如何在比赛结束前先得到结果

export class SettingService{
  constructor(private _http:http){}

  isLoaded:boolean = false;

  public getSetting():Promise {
    if(this.isLoaded) {
      return Promise.resolve();
    }
    return this._http.get('someAPI')
    .map((result)=>{return result.toJSON()})
    .do((data:any)=> {
      localStorage.setItems("settings",json.stringify(data))
      this.isLoaded = true;
    })
    .toPromise();
  }
}

class MyPipe {
  constructor(private settingService:SettingService) {}

  transform(val,args){
    return this.settingService.getSetting().then(_ => {
      let settings = json.parse(localStorage("settings"))
      return eval("settings." + val); //in this instance, it will execute settings.setting.val1
    });
}