[英]How to use a pipe in a component in Angular 2?
I have a pipe class which returns data based on the arguments you are passing.我有一个管道类,它根据您传递的参数返回数据。 I know how to use it in my template HTML using the
|
我知道如何在我的模板 HTML 中使用
|
symbol, but I want to use it in my component too.符号,但我也想在我的组件中使用它。
Is there a way to call a pipe directly from inside a component or a service in Angular 2?有没有办法直接从 Angular 2 中的组件或服务内部调用管道?
You can call your pipe directly in your code by using:您可以使用以下命令直接在代码中调用管道:
YourPipeClass.prototype.transform(value, arg1, arg2);
You can call it from inside your component or from anywhere else that imports it.您可以从组件内部或从导入它的任何其他地方调用它。
There is also the new
way:还有一种
new
方法:
new SortTodosPipe().transform(value, arg1, arg2);
But keep in mind it will create an object, so either save that object for later use or use the prototype
method.但请记住,它会创建一个对象,因此要么保存该对象以备后用,要么使用
prototype
方法。
Anyway you choose, you must add the pipe to your providers
if you use it inside a component, like so:无论如何选择,如果您在组件中使用管道,则必须将管道添加到您的
providers
,如下所示:
@NgModule({
providers: [YourPipe]
})
I would instance it and call it "transform" method.我会实例化它并将其称为“转换”方法。 I would do so:
我会这样做:
Here is a sample with sample value and parameters:这是一个带有示例值和参数的示例:
import {FilterPipe} from './my.pipe';
(...)
@Component({
(...)
})
export class SomeComponent {
someMethod() {
var val = [
{ name: 'test', fieldName: 'fieldvalue' },
(...)
];
var params = [ 'fieldName', 'fieldValue' ];
var p = new FilterPipe();
var result = p.transform(val, params);
}
}
In the template this would be used for example this way:在模板中,这会以这种方式使用,例如:
<div *ngFor="#elt of val | filter:'fieldName':'fieldValue'">
{{elt.name}}
</div>
I would keep the reusable part of what you're trying to do in a separate service, which can then be injected anywhere.我会将您尝试执行的操作的可重用部分保留在单独的服务中,然后可以将其注入到任何地方。 This feels like a slippery slope to something less testable and reusable.
这感觉就像一个不太可测试和可重用的东西的滑坡。
I give solutions to solve this question from previous answers:我从以前的答案中给出了解决这个问题的解决方案:
You can create instance from Pipe class then use it's transform method within component class, Like this您可以从 Pipe 类创建实例,然后在组件类中使用它的转换方法,像这样
@Component({
...
})
export class Component {
method() {
const date: sting = '24-05-2020';
const datePipe = new DatePipe();
const formatedDate = datePipe.transform(date, 'shortTime');
}
}
You can Provide DatePipe using @component
Tag Or Using @Module
tag under your Module class for this Component Then using Dependency injection to inject DatePipe instance into Component's constructor, Like this您可以使用
@component
标签或在您的模块类下为此组件使用@Module
标签提供DatePipe 然后使用依赖注入将DatePipe 实例注入到组件的构造函数中,像这样
@Component({
...
providers: [DatePipe] // if you want to provide DatePipe under Module see @Alexander Leonov answer
})
export class Component {
Component(private _datePipe: DatePipe) {
}
method() {
const date: sting = '24-05-2020';
const formatedDate = this._datePipe.transform(date, 'shortTime');
}
}
Notices:注意事项:
Like Built-in Pipes classes, also your custom Pipe can apply this solutions与内置管道类一样,您的自定义管道也可以应用此解决方案
This Solutions apply on Angular v7+, I Don't known is work with Angular v2此解决方案适用于 Angular v7+,我不知道是否适用于 Angular v2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.