Question

我有懒惰加载的组件，我想在从服务器加载组件东西/第三方库等时显示预加载器。

我如何尝试这样做：创建具有显示/隐藏加载程序可能性的组件，我想在有人尝试更改路径时（在组件加载之前）显示它并在加载组件时隐藏它。

另外，我想避免在每个组件中包含一个加载器服务，并在ngOnInit上隐藏加载器（例如）。现在我尝试将它放在顶层（app.js）

但我不知道如何，因为

首先：不知道如何正确检测尝试更改路由器和显示加载器（现在我让它变得非常丑陋 - 当我们点击导航链接时只是点火事件......而且它很糟糕，因为当我尝试通过编程方法导航时 - 不会显示加载器）。在路由器渲染新组件之前，可能存在一些检测更改的方法吗？

我看到了：topic 1 topic 2 router.subscribe（path =＆gt; {/ hide loader action /}）

因为没有正常工作 1：它在组件渲染后工作，仅在加载所有组件时才触发，我想在加载前显示加载器。 2：当加载componnet时，我们尝试在组件之间导航并返回已加载的组件 - 此订阅将立即触发。所以它意味着在我们返回到一个laded组件后，第一个订阅将在那之后被解雇 - 加载器将显示:)并且从不隐藏。我不知道为什么（因为在某些组件上，router.next没有被触发，取消订阅也不会被触发

有我的代码

private showPreloader() {
    let a;
    this._loadingService.controlledLoaderShow();

    a = this._router.subscribe((val) => {
      console.log("Hide preloader");
      this._loadingService.controlledLoaderHide();

      a.unsubscribe();
    },
      (err) => {console.log(`Error in app.ts showPrealoder ${err}`)});



  }

Answer 1

我没有为你的目的尝试过，但我认为CanActivate值得一试。在激活路线之前调用它。

有关如何将数据传递到共享服务，请参阅https://github.com/angular/angular/issues/4112（Angulars RC.x版本的路由器中已经或已经更改过。）

Angular2在路由改变之前检测路由器更改尝试

1 个答案: