路由器事件简化指南

RouterEvents 是一个用于筛选特定路由器事件并对其作出响应的实用工具服务。请参阅 Angular 文档中的此页面了解可用的路由器事件。

优势

您可以直接使用路由器事件并按如下方式筛选它们：

import {
  NavigationEnd,
  NavigationError,
  NavigationCancel,
  Router,
} from '@angular/router';
import { filter } from 'rxjs/operators';
import { inject, Injectable } from '@angular/core';

@Injectable()
class SomeService {
  private router = inject(Router);

  navigationFinish$ = this.router.events.pipe(
    filter(
      event =>
        event instanceof NavigationEnd ||
        event instanceof NavigationError ||
        event instanceof NavigationCancel,
    ),
  );
  /* Observable<Event> */
}

然而，RouterEvents 让筛选路由器事件变得更加简单：

import { RouterEvents } from '@abp/ng.core';

@Injectable()
class SomeService {
  private routerEvents = inject(RouterEvents);

  navigationFinish$ = this.routerEvents.getNavigationEvents('End', 'Error', 'Cancel');
  /* Observable<NavigationCancel | NavigationEnd | NavigationError> */
}

RouterEvents 还提供了改进的类型安全性。在上面的示例中，navigationFinish$ 具有推断类型 Observable<NavigationCancel | NavigationEnd | NavigationError>，而直接筛选路由器事件时，它将是 Observable<Event>。

使用方法

您无需在模块或组件级别提供 RouterEvents，因为它已经在根级别提供。您可以直接在组件中注入并开始使用它。

如何获取特定导航事件

您可以使用 getNavigationEvents 获取匹配给定事件键的导航事件流。

import { RouterEvents } from '@abp/ng.core';
import { merge } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Injectable()
class SomeService {
  private routerEvents = inject(RouterEvents);

  navigationStart$ = this.routerEvents.getNavigationEvents('Start');
  /* Observable<NavigationStart> */

  navigationFinish$ = this.routerEvents.getNavigationEvents('End', 'Error', 'Cancel');
  /* Observable<NavigationCancel | NavigationEnd | NavigationError> */

  loading$ = merge(
    this.navigationStart$.pipe(mapTo(true)),
    this.navigationFinish$.pipe(mapTo(false)),
  );
  /* Observable<boolean> */
}

如何获取所有导航事件

您可以使用 getAllNavigationEvents 获取所有导航事件流，无需传递任何键。

import { RouterEvents, NavigationStart } from '@abp/ng.core';
import { map } from 'rxjs/operators';

@Injectable()
class SomeService {
  private routerEvents = inject(RouterEvents);

  navigationEvent$ = this.routerEvents.getAllNavigationEvents();
  /* Observable<NavigationCancel | NavigationEnd | NavigationError | NavigationStart> */

  loading$ = this.navigationEvent$.pipe(
    map(event => event instanceof NavigationStart),
  );
  /* Observable<boolean> */
}

如何获取当前和之前的导航

您可以使用 previousNavigation 和 currentNavigation 属性以响应式方式检索导航。

previousNavigation: Signal<string>;
currentNavigation: Signal<string>;

import { RouterEvents } from "@abp/ng.core";

@Injectable()
class SomeService {
  readonly routerEvents = inject(RouterEvents);

  someAction() {
    const previousNavUrl = this.routerEvents.previousNavigation();
    if (previousNavUrl) {
      // 执行某些操作
    }
  }
}

如何获取特定路由器事件

您可以使用 getEvents 获取匹配给定事件类的路由器事件流。

import { RouterEvents } from '@abp/ng.core';
import { ActivationEnd, ChildActivationEnd } from '@angular/router';

@Injectable()
class SomeService {
  private routerEvents = inject(RouterEvents);

  moduleActivation$ = this.routerEvents.getEvents(ActivationEnd, ChildActivationEnd);
  /* Observable<ActivationEnd | ChildActivationEnd> */
}

如何获取所有路由器事件

您可以使用 getEvents 获取所有路由器事件流，无需传递任何事件类。这与访问 Router 的 events 属性没有区别，只是为了方便而添加到服务中。

import { RouterEvents } from '@abp/ng.core';
import { ActivationEnd, ChildActivationEnd } from '@angular/router';

@Injectable()
class SomeService {
  private routerEvents = inject(RouterEvents);

  routerEvent$ = this.routerEvents.getAllEvents();
  /* Observable<Event> */
}