Angular 15项目中Resolve显示删除线（已弃用）问题求助

Angular 15及以后版本已经弃用了类式的Resolve接口，转而推荐使用函数式解析器（ResolveFn），这是Router API轻量化重构的一部分。下面是具体的替代方案：

1. 替换类式Resolver为函数式解析器 #

把原来的Resolver类改成函数形式，用ResolveFn定义类型，通过inject()注入所需服务：

// 比如创建client.resolver.ts
import { inject } from '@angular/core';
import { ResolveFn } from '@angular/router';
import { ClientService } from './path-to-your-client-service';
import { Client } from './path-to-your-client-model';

export const clientResolver: ResolveFn<Client | undefined> = (route, state) => {
  const clientId = route.paramMap.get('id');
  return clientId ? inject(ClientService).getClientById(clientId) : undefined;
};

2. 更新路由配置 #

在app-routing.module.ts里，将原来resolve配置中的类替换成上述函数：

import { clientResolver } from './client.resolver';

const routes: Routes = [
  {
    path: 'clients/add-edit/:id',
    component: AddEditClientComponent,
    resolve: {
      client: clientResolver // 这里用函数替代原Resolver类
    }
  }
];

3. 在组件中获取解析数据 #

组件内获取数据的方式和之前一致，通过ActivatedRoute的snapshot.data或订阅data流：

// addEditClient.ts
import { ActivatedRoute } from '@angular/router';
import { Client } from './path-to-your-client-model';

export class AddEditClientComponent {
  clientData?: Client;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 快照获取（一次性）
    this.clientData = this.route.snapshot.data['client'];
    
    // 若需要监听路由参数变化（比如复用组件时），用订阅方式
    // this.route.data.subscribe(data => {
    //   this.clientData = data['client'];
    // });
  }
}

可选：兼容旧类式Resolver（不推荐） #

如果暂时不想重构类式Resolver，可以用ResolveFn.fromClass()包装后使用，但官方明确未来版本会移除类式接口，建议尽快迁移到函数式：

resolve: {
  client: ResolveFn.fromClass(OldClientResolver)
}

内容的提问来源于stack exchange，提问作者codinggirl23