CanDeactive Guard: 如何在使用 router.navigateByUrl() 进行路由时重置活动类

要在使用router.navigateByUrl()进行路由时重置活动类，可以使用CanDeactivate守卫来实现。守卫可以提供一个canDeactivate方法，该方法在路由导航发生之前被调用，并返回一个boolean值或一个Promise<boolean>或一个Observable<boolean>。

下面是一个示例，展示了如何在使用router.navigateByUrl()进行路由时重置活动类：

首先，创建一个CanDeactivateGuard守卫类来实现CanDeactivate接口，并在canDeactivate方法中重置活动类。在这个示例中，我们假设活动类的名称为ActivityComponent：

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { ActivityComponent } from './activity.component';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<ActivityComponent> {
  canDeactivate(component: ActivityComponent): boolean {
    // 重置活动类的状态
    component.reset();

    return true;
  }
}

接下来，在路由模块中使用CanDeactivateGuard守卫来保护需要重置活动类的路由。在canDeactivate属性中，将CanDeactivateGuard类作为守卫提供给路由：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ActivityComponent } from './activity.component';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  {
    path: 'activity',
    component: ActivityComponent,
    canDeactivate: [CanDeactivateGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [CanDeactivateGuard]
})
export class AppRoutingModule { }

最后，在活动类中添加一个reset方法来重置活动类的状态：

import { Component } from '@angular/core';

@Component({
  selector: 'app-activity',
  templateUrl: './activity.component.html',
  styleUrls: ['./activity.component.css']
})
export class ActivityComponent {
  // 活动类的状态
  // ...

  reset() {
    // 重置活动类的状态
    // ...
  }
}

现在，当使用router.navigateByUrl()进行路由时，CanDeactivateGuard守卫会在路由导航之前调用canDeactivate方法，并在其中执行重置活动类的操作。