在Angular中，我们可以使用CanDeactivate守卫来拦截子路由的变化。下面是一个包含代码示例的解决方法：

首先，我们需要创建一个拦截器服务来拦截子路由的变化。创建一个名为CanDeactivateGuardService的服务，并实现CanDeactivate接口。接口定义了一个canDeactivate方法，我们可以在该方法中编写我们的拦截逻辑。

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';

export interface CanComponentDeactivate {
  canDeactivate: () => boolean | Observable;
}

@Injectable()
export class CanDeactivateGuardService implements CanDeactivate {
  canDeactivate(component: CanComponentDeactivate): boolean | Observable {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

接下来，在我们的子路由组件中实现CanComponentDeactivate接口，并在canDeactivate方法中编写我们的拦截逻辑。在这个例子中，我们将询问用户是否要离开当前页面。

import { Component } from '@angular/core';
import { CanComponentDeactivate } from './can-deactivate-guard.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-child',
  template: `
    
Child Component
    Go to Next
  `
})
export class ChildComponent implements CanComponentDeactivate {
  canDeactivate(): boolean | Observable {
    const confirmResult = confirm('Do you want to leave this page?');
    return confirmResult;
  }

  onClick() {
    // Navigate to next route
  }
}

最后，在我们的路由模块中将CanDeactivateGuardService添加为子路由的守卫。

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ChildComponent } from './child.component';
import { CanDeactivateGuardService } from './can-deactivate-guard.service';

const routes: Routes = [
  { path: 'child', component: ChildComponent, canDeactivate: [CanDeactivateGuardService] }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class ChildRoutingModule { }

现在，当用户试图离开子路由时，会触发CanDeactivateGuardService的canDeactivate方法。如果该方法返回true，则用户会被允许离开子路由，否则将被阻止离开。

这就是一个使用CanDeactivate守卫拦截子路由变化的解决方法。希望对你有帮助！