Question

我正在制作angular2应用程序。我最大的问题是无法推迟加载主要组件的依赖子组件，直到某些承诺得到解决。

我有app.component.ts，类名为AppComponent，我在boot.ts中引导，如下所示：

class MyClass {
  constructor () {
    this.props = {
        question: 'live, universe, everything',
        answer: 42
    }
  }

  default () {
    return this.props
  }

  hello () {
    return 'hello world'
  }
}
const foo = new MyClass()

// execute the default method
console.log(foo) // log: {question: 'live, universe, everything', answer: 42}

// execute hello method
console.log(foo.hello()) // log: hello world

现在我想在导航到我的默认路由之前调用一些非常重要的http服务，即 - ＆＃39; /＆＃39;。一个http服务向我返回数据，用于进行搜索引擎优化并在各种路径上设置元数据。

我知道任何类的构造函数最初都被调用，但我不知道构造函数是否等待promises得到解决。

Answer 1

如果您使用路由器，则可以使用CanActivate，否则只需使用*ngIf="dataArrived"

包裹模板

另见How to pass parameters rendered from backend to angular2 bootstrap method

Answer 2

在您的请求完成后，您可以异步引导。这是一个示例：

var app = platform(BROWSER_PROVIDERS)
   .application([BROWSER_APP_PROVIDERS, appProviders]);

var service = app.injector.get(CompaniesService);

service.executeSomething().flatMap((data) => {
  var companiesProvider = new Provider('data', { useValue: data });
  return app.bootstrap(appComponentType, [ companiesProvider ]);
}).toPromise();

有关详细信息，请参阅此问题：

angular2 bootstrap with data from ajax call(s)

和相应的plunkr：https://plnkr.co/edit/ooMNzEw2ptWrumwAX5zP?p=preview。

Answer 3

另一个解决方案是在构造函数中使用计时器：

setTimeout(() => {
    call your function here
}, 500);

如何推迟主要组件的相关组件的初始化，以便可以解决某些承诺

3 个答案: