Angular 角度4：路线过渡荷载

我试图创建一个简单的组件，当路由解析时间超过半秒时，它有一个布尔标志

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);

---

每组路由事件都有id。当id更改时，您需要切换微调器。

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

 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课程：

我想现在我要使用这个解决方案：

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);

这说明：

.debounceTime（500）

=如果在500毫秒之前创建了另一个事件，则抑制me

.filter（event=>event instanceof NavigationStart）

=仅从后面没有500毫秒的事件中获取NavigateStart

---

.subscribe（event=>this.isLoading=true）=我们现在知道，这是一个导航启动，没有在500毫秒内完成，因此我们可以启动加载图标
谢谢Deborah-我觉得这个解决方案取决于用户的机器/浏览器，因为他们最终看到的是什么。如果可能的话，我想用一个特定的去盎司时间对其进行更多的控制，500毫秒超时将不会以这种方式处理。最好的方法是使用下面@KeniSteward建议的rxjs.debounce（500）。您可以使用回调来手动处理超时，但RxJs已经提供了处理超时的函数。我认为需要使用debounceTime而不是debounce。我只是尝试了一下，但它对我不起作用：问题是有几个
RouteConfigLoadStart
和
RouteConfigLoaded
将在加载期间发生，这将重置去盎司计数我很抱歉，我以为唯一的事件是NavigationStart/End/Cancel/Error。更新到debounceTime。你能给我竖起大拇指让我有足够的代表对这些东西发表评论吗？哈哈
let isLoading: boolean = false;

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

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