在Angular 12中，可以通过使用Resolve来实现在导航时进行异步调用的解决方法。

首先，创建一个名为dataResolver的解析器服务，用于处理导航时的异步数据调用。在该服务中，可以使用resolve方法来返回一个Promise，该Promise将在导航完成之前解析为所需的数据。

下面是一个示例的dataResolver服务代码：

import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable()
export class DataResolver implements Resolve {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable | Promise | any {
    // 在这里进行异步数据调用，例如从API获取数据
    return new Promise((resolve, reject) => {
      // 模拟异步数据调用
      setTimeout(() => {
        resolve('Resolved data');
      }, 2000);
    });
  }
}

然后，在路由配置中使用dataResolver解析器来调用异步数据。例如，假设有一个名为dashboard的路由，可以在其配置中使用resolve属性来指定dataResolver解析器：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DataResolver } from './data-resolver.service';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    resolve: {
      data: DataResolver
    }
  }
];

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

最后，在组件中可以通过访问ActivatedRoute来获取解析器返回的数据。在上面的示例中，可以在DashboardComponent组件中访问data属性来获取解析的数据：

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

@Component({
  selector: 'app-dashboard',
  template: `
    
Dashboard
    
Data: {{ data }}
  `
})
export class DashboardComponent {
  data: any;

  constructor(private route: ActivatedRoute) {
    this.data = this.route.snapshot.data['data'];
  }
}

这样，在导航到dashboard路由时，dataResolver解析器将在导航完成之前进行异步数据调用，并将解析的数据提供给DashboardComponent组件进行使用。

请注意，上述代码示例中的异步调用是通过使用setTimeout模拟的，实际情况中可能是通过从API获取数据或执行其他异步操作来实现的。