Angular 提供的管道不'；无法访问路由解析数据

我有一条管道，需要访问管线数据才能良好施工：

export class LevelPercentagePipe implements PipeTransform {

  levelDictionnary: LevelDictionnary;

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

此数据在路由模块中解析：

{
  path: 'xxx',
  loadChildren: './xxx/xxx.module#XxxModule',
  resolve: {
    prerequisiteLists: PrerequisiteResolver
  }
}

如果在html模板中使用管道，则它在我的应用程序的其他位置也可以工作。 但是在这种特殊情况下，我需要在我的

component.ts

文件中使用这个管道。因此，我在特定功能模块中提供了它：

@NgModule({
  declarations: [...],
  imports: [...],
  providers: [LevelFilterPipe],
})

但是现在，当它被注入到我的组件构造函数中时，它似乎不知道

ActivatedRoute

中的数据

constructor(
        private profileService: ProfileService,
        private nameFilterPipe: NameFilterPipe,
        private levelFilterPipe: LevelFilterPipe
      ) {}

这不管用

因此，我需要手动构建管道

constructor(
    private profileService: ProfileService,
    private route: ActivatedRoute,
    private scorePipe: ScorePipe,
    private nameFilterPipe: NameFilterPipe
  ) {
    // We have to inject route data and scorePipe manually because it's not injected automatically.
    this.levelFilterPipe = new LevelFilterPipe(this.route, this.scorePipe);
  }

---

是否有其他方法可以从

ActivatedRoute

自动注入数据？

管道不是提供程序。将管道放入组件的providers数组不会有多大作用

如果希望使其正常工作，只需在组件中创建管道实例并传递当前管线即可

constructor(private route: ActivatedRoute) {
  const pipeInstance = new MyPipe(ths.route);
}

你可以尝试在你的管道中注射，类似这样：

constructor(@Inject(forwardRef(() => ActivatedRoute)) private route: ActivatedRoute) {}

---

但我不确定这是否有效

由于管道只是另一个TypeScript类，如果使用

@Injectable（）

装饰符装饰，则可以将其作为依赖项注入

因此，如果在管道上方添加一个

@Injectable（）

，您的第一种方法将起作用

大概是这样的：

import { Pipe, PipeTransform, Injectable } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Injectable()
@Pipe({
  name: 'level-filter'
})
export class LevelFilterPipe implements PipeTransform {

  constructor(private activatedRoute: ActivatedRoute) {}

  transform(value: any, args?: any): any {
    ...
  }

}

---

这是给你的裁判的一封信

---

PS:不太确定这样做是否好。

您需要将

管道添加到组件的提供者列表中。现在，管道注入将使用更新的
ActivatedRoute
数据创建管道的新实例

@Component({
  selector: '...',
  template: `...`:
  providers: [ YourPipeName ]
})

这是你问题的一个有效例子。查看文件
hello.component.ts
，此组件使用您提到的参数路由，请删除此组件中提供的管道以重现您的问题。
这是管道（服务）工作的预期方式。你能试着在提供者数组中提供它作为依赖项吗？@KiraAG它已经在我的问题中提到的模块提供者数组中。如果我不清楚，很抱歉。我的意思是提供ActivatedRoute作为提供者数组中LevelFilterPipe的依赖项。就像前面提到的@KiraAG一样，如果我正确理解依赖注入是如何工作的，
ActivatedRoute
已经注入到管道中了吗？通过将其添加到构造函数参数中，它应该是隐式的，对吗？如果源信息在运行时之前不可用，我们可能需要将其导出为工厂提供程序。我已经用link更新了它。你的例子中没有使用ActivatedRoute数据。它仍然不能解决我的问题…@BaptisteArnaud，我必须为此创建一个完整的示例。您是否介意创建一个最小的StackBlitz示例，并与其他人共享？我可以研究一下，看看问题到底出在哪里。它确实有效！谢谢。您能解释一下为什么在这种情况下，我们需要将此管道设置到
提供者
列表中吗？如果您查看Angular Docs，您会发现它的描述是
表示路由器在某一时刻的状态。
正如我在回答中提到的，在组件的提供者列表中添加管道将在每次创建组件时创建管道的新实例。因此，与app.module提供快照时不同，快照的数据在该时刻被更新，这意味着管道首先创建时快照被及时更新到该时刻，但当要求提供数据时，数据已经过时