可以在代码中使用管道吗?


103

当我在模板中使用自定义管道时,它是这样的:

{{user|userName}}

而且效果很好。

可以在代码中使用管道吗?

我尝试像这样使用它:

let name = `${user|userName}`;

但这表明

用户名未定义

我的替代方法是db.collection.findOne()在代码中手动使用。但是有什么聪明的方法吗?


您不能使用这样的模板,您必须将管道注入到您的构造器中
Yoann Prot

对不起,我会说清楚。我已经注水了
苗洪波

您尝试在代码中使用哪个管道?这是您的自定义管道吗?
西瓦

1
我不认为您可以这样做,因为...它不是由Angular执行的。这是ES6字符串插值...
Thierry Templier

Answers:


112

首先在providers模块的中声明管道:

import { YourPipeComponentName } from 'your_component_path';

@NgModule({
  providers: [
    YourPipeComponentName
  ]
})
export class YourServiceModule {
}

然后,您可以@Pipe在这样的组件中使用:

import { YourPipeComponentName } from 'your_component_path';

class YourService {

  constructor(private pipe: YourPipeComponentName) {}

  YourFunction(value) {
    this.pipe.transform(value, 'pipeFilter');
  }
}

1
看起来不错!但是由于某种原因,依赖项注入无法将我的管道注入到构造函数中,即使它可以在html中使用也没有问题。它在另一个模块中声明并导出,也许也需要在提供者列表中?不过,创建和使用MyPipe的新实例确实可以。只有DI有问题...
山姆

19
@Sam确实需要在其中providers。添加YouPipeComponentName到您的应用程序中providers,此方法将完美运行。
SrAxi

4
还要确保将其添加到正确的提供程序。如果要全局使用管道,请将其放入app.module提供程序中。如果只想在一些延迟加载的模块中使用它,请将其放在各自模块的提供程序中
Phil

导入路径错误。通过可用的下管不会@角/共同
安德里斯

@Andris我已经编辑了它。那是一个错误。我的意思是您必须导入您的管道模块。
saghar.fadaei

107

@Siva是正确的。谢谢!

因此,在组件中使用管道的方式如下:

let name = new UserNamePipe().transform(user);

链接到另一个类似的问题。


3
这可行,但是可能不遵循Angular最佳实践/首选模式。如另一个答案所示,将管道作为组件依赖项传递给构造函数是“更正确的选择”。
乔什

使用这种方法是否没有性能问题?有些人可能会一直使用它!
Mohammad Kermani

2
这是使用管道的完全错误的方法。管道是特殊用途的类,应通过Angular提供的特殊方式使用。如果您需要在管道中实现某些功能,但又需要像常规TypeScript类一样使用它,则必须创建regular该类并在TS代码中使用它(your-component.ts例如)。如果您在管道中需要相同的功能,则始终也可以regular在管道中使用该类。
亚历山大·阿巴库莫夫

最大的区别是您可以通过这种方式创建更多的类实例。通过使用Angular语法,其行为类似于singelton,并且仅被实例化一次。
Sir2B
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.