我在 Angular 15 生成的项目中得到了删除线的解决方案。我该如何解决这个问题？

Question

我对角度真的很陌生，这是我创建的第一个项目。我在这里需要做的是创建一个 add-editClient 组件，并使用 Angular 解析方法从后端（spring-boot）获取数据，对于数据库，我使用 MYSQL 和 DBeaver。我用有角的材料设计我的界面。

我还在应用程序路由模块中添加了解析数据。无论我尝试从@angular/router安装resolve多少次，它仍然被弃用。

请参阅下面的附图。

addEditClient.ts 文件 app-routing.module.ts

请告诉我是否有任何方法可以解决这个问题。非常感谢任何建议:)

Answer 1

Resolve 在 v15.2 中已弃用

并将在 v17 中删除

正如在 的弃用说明中提到的，Resolve它@angular/router已被弃用，取而代之的是ResolveFn。

Deprecated: Class-based Route resolvers are deprecated in favor of functional resolvers. 
An injectable class can be used as a functional guard using the 
`inject` function: `resolve: {'user': () => inject(UserResolver).resolve()}`.

使用功能解析器的步骤

Resolve从中删除已弃用的实现addEditClient.ts

将此函数添加到您的路由器或服务文件或任何其他带有export. 这将注入AddEditClientService并解析您需要的功能。如您所见，您还可以使用route和stateparams 并将它们传递给您的函数。

const addEditClietResolver: ResolveFn<any> =
    (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => {
      return inject(AddEditClientService).getClientById();
    };

并在路由器路径中使用它

{
    path: 'clients/add-edit',
    component: AddEditClientComponent,
    resolve: {data: addEditClientResolver},
}

或者通过直接在 Route 对象中使用该函数来采用更短的方法

{
    path: 'clients/add-edit',
    component: AddEditClientComponent,
    resolve: {data: () => inject(AddEditClientService).getClientById()},
}

您可以在Angular 文档中查看更多相关信息