Angular 4 : Route Transition Loading

Question

我正在尝试创建一个简单的组件，它有一个 bool 标志 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

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

这是什么意思:

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

.filter(event => event instanceof NavigationStart) = 仅从未跟随 500 毫秒的事件中获取 NavigateStart

.subscribe(event => this.isLoading = true); = 我们现在知道这是一个没有在 500 毫秒内跟随的导航开始，所以我们可以开始加载图标