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

Question

我有延迟加载的组件，当我们从服务器加载组件内容/第三方库等时，我想显示预加载器。

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

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

但我不知道怎么做，因为

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

我看到了：topic 1topic 2 router.subscribe(path => {/hide loader action/})

无法正常工作，因为
1：它在组件渲染后工作并且仅在加载所有组件内容时触发，我想在加载之前显示加载器。 2：当组件被加载并且我们尝试在组件之间导航并返回加载的组件时——这个订阅将立即被触发。所以这意味着在我们返回到一个 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 版本的路由器中更改）。