Question

我有一个管道，该管道需要访问路由数据才能被很好地构造：

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注入数据吗？

Answer 1

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

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

这是您的问题的有效StackBlitz project示例。看看文件hello.component.ts，该组件使用您提到的参数进行路由，请删除该组件中提供的管道以重现您的问题。

Answer 2

管道不是提供者。将管道放在组件的providers数组中不会做很多事情。

如果您希望使其工作，您可以在组件中简单地创建管道的实例并传递当前路线。

account set gmlevel

您也可以尝试在管道中进行注入，如下所示：

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

但是我不确定这是否可行。

Answer 3

由于Pipe只是另一个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 {
    ...
  }

}

这是您推荐的Sample Working StackBlitz Example。

PS：不确定这是否是一件好事。

提供的管道无权访问路由解析的数据

3 个答案: