角4：路由转换加载

Question

我试图创建一个简单的组件，它有一个布尔标志isLoading即true当一个路由需要超过半秒的时间来解决。

我有一块将其关闭：

this.router.events 
     .filter(event => event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) 
     .subscribe(event => this.isLoading = false); 

但我怎么说：

this.router.events 
     //given a NavigationStart 
     //If you don't see NavigationEnd/NavigationCancel/NavigationError within 500ms 
     .subscribe(event => this.isLoading = true); 

Answer 1

每套路由事件有ID。当id改变时 - 你需要切换微调器。

Answer 2

我只是做这个，没有特殊的计时器：

constructor(private authService: AuthService, 
      private messageService: MessageService, 
      private router: Router) { 

    router.events.subscribe((routerEvent: Event) => { 
     this.checkRouterEvent(routerEvent); 
    }); 
} 

checkRouterEvent(routerEvent: Event): void { 
    if (routerEvent instanceof NavigationStart) { 
     this.loading = true; 
    } 

    if (routerEvent instanceof NavigationEnd || 
     routerEvent instanceof NavigationCancel || 
     routerEvent instanceof NavigationError) { 
     this.loading = false; 
    } 
} 

，它工作正常。如果路线加载得很快，则不会出现微调。如果路由解析器需要一些时间，则会出现微调器。

此代码是从“角路由” Pluralsight当然这里：https://app.pluralsight.com/library/courses/angular-routing

Answer 3

我想现在我要去与此解决方案：

ngOnInit() { 
    let timer: any; 

    this.router.events 
     .subscribe(event => { 
      if (event instanceof NavigationStart) { 
       clearTimeout(timer); 
       timer = setTimeout(() => this.isLoading = true, 250); 
      } else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) { 
       clearTimeout(timer); 
       this.isLoading = false; 
      } 
     }); 
} 

如果某人发布的清洁RxJs方式要去一下吧，我会注意，

编辑：基于@ KeniSteward的答案，我能得到这个解决方案的工作：

this.router.events 
     .filter(event => event instanceof NavigationStart || event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) 
     .debounceTime(250) 
     .filter(event => event instanceof NavigationStart) 
     .subscribe(event => this.isLoading = true); 

    this.router.events 
     .filter(event => event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) 
     .subscribe(event => this.isLoading = false); 

编辑＃2：即使清洁 -

this.router.events 
     .filter(event => event instanceof NavigationStart || event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) 
     .do(event => this.isLoading = false) 
     .debounceTime(250) 
     .filter(event => event instanceof NavigationStart) 
     .subscribe(event => this.isLoading = true); 

Answer 4

let isLoading: boolean = false; 

ngOnInit() { 
    this.router.events.subscribe((event) => { 
     if (event instanceof NavigationStart) { 
      this.isLoading = true; 
     } 
     if (event instanceof NavigationEnd) { 
      this.isLoading = false; 
     } 
    }); 
} 

Answer 5

this.router.events 
     .debounceTime(500) 
     .filter(event => event instanceof NavigationStart) 
     .subscribe(event => this.isLoading = true); 

它说的是：

.debounceTime(500) =如果创建了另一个事件之前500毫秒抑制我

.filter(event => event instanceof NavigationStart) =只从没有随着500ms的

.subscribe(event => this.isLoading = true);事件采取NavigateStart =我们现在知道，这是不被采纳500毫秒之内，所以我们可以开始加载图标