角度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

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

这说的是:

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

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

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