在Angular中将路由解析器提供程序和组件提供程序相结合

您可以使用providers路.这样，服务将在路由级别被实例化.

看起来像这样:

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'a',
        component: AComponent,
        providers: [Store],
        resolve: {
          data: (
            route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
          ) => ({
            storeInstanceNumber: inject(Store).instanceNumber,
          }),
        },
      },
      {
        path: 'b',
        component: BComponent,
        providers: [Store],
        resolve: {
          data: (
            route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
          ) => ({
            storeInstanceNumber: inject(Store).instanceNumber,
          }),
        },
      },
    ]),
  ],
});

为了展示一个组件，它看起来像这样:

@Component({
  selector: 'app-a',
  standalone: true,
  template: `
    <h1>Component A</h1>
    <div>Store instance number: {{ store.instanceNumber }}</div><br />
    <div>Route data: <pre>{{ routeData | async | json }}</pre></div>
  `,
  imports: [CommonModule],
})
export class AComponent {
  public readonly store = inject(Store);
  public readonly routeData = inject(ActivatedRoute).data;
}

这只是为了证明您可以在解析器和组件中注入存储.

给你一百块.

请注意，这样做时，在路由级别提供的Store只在每条路由创建once个，而不是每个组件实例创建一个.根据您想要的，这可能是一个功能或一个问题:离开一条路由并返回它，您仍然拥有所有可用的数据.

无论你想要什么，在两种情况下都可以实现.下面是一个示例，每次我们返回到路由a时都会给出一个新的实例，并为路由b保留相同的Store实例:

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'a',
        component: AComponent,
        resolve: {
          store: (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) =>
            // small hack to create a new Store instance every time we open that route
            Injector.create({
              providers: [Store],
              parent: inject(Injector),
            }).get(Store),
        },
      },
      {
        path: 'b',
        component: BComponent,
        // here we'll get the same Store instance if we leave and come back
        providers: [Store],
        resolve: {
          data: (
            route: ActivatedRouteSnapshot,
            state: RouterStateSnapshot
          ) => ({
            storeInstanceNumber: inject(Store).instanceNumber,
          }),
        },
      },
    ]),
  ],
});

对于组分B，您不需要更改任何内容，您可以像往常一样注入Store.

对于组件A，我们需要稍微调整代码，因为我们现在在路由数据中接收Store实例:

// this component receives a new Store instance every time it's been created
@Component({
  selector: 'app-a',
  standalone: true,
  template: `
    <h1>Component A</h1>
    <div>Store instance number: {{ store.instanceNumber }}</div><br />
  `,
  imports: [CommonModule],
})
export class AComponent {
  public readonly store:Store = inject(ActivatedRoute).snapshot.data['store']
}

给你another Stackblitz for this solution块如果你交替地转到a，然后几次转到b，你会在视图中看到a上的计数器增加，但在b中它保持不变.