使用RxJS的takeUntil操作符将订阅取消时机与路由导航关联起来，以便在组件销毁前取消未完成的订阅。

示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; import { Router, NavigationEnd } from '@angular/router';

@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', styleUrls: ['./my-component.component.css'] }) export class MyComponentComponent implements OnInit, OnDestroy { private ngUnsubscribe = new Subject();

constructor(private router: Router) { }

ngOnInit() { this.router.events .pipe(takeUntil(this.ngUnsubscribe)) .subscribe(event => { if (event instanceof NavigationEnd) { // 在这里编写处理导航结束时要做的事情 } }); }

ngOnDestroy() { this.ngUnsubscribe.next(); this.ngUnsubscribe.complete(); } }

在组件的ngOnInit方法中，使用takeUntil操作符将路由事件与ngUnsubscribe主体关联起来，以便在组件销毁之前取消任何未完成的订阅。在这个例子中，我们只关心NavigationEnd事件。在组件的ngOnDestroy方法中，我们取消与ngUnsubscribe相关的所有订阅。