在 Angular 2 应用程序的组件中插入管道时出错

Question

我正在使用 Angular 2，我必须创建搜索过滤器。所以我创建了一个带有搜索逻辑的管道并将其注入所需的组件中。 但是在注入时，我得到了错误。

这是我注入管道的代码，

import { FilterPipe} from '../filter.pipe';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  pipes: [FilterPipe],
  styleUrls: ['./dialog.component.css']
})

这是一个错误，

Argument of type '{ selector: string; templateUrl: string; pipes: typeof FilterPipe[]; styleUrls: string[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'pipes' does not exist in type 'Component'.

请任何人，建议我如何在组件中添加管道。

Answer 1

您的问题是您在 pipes 装饰器中使用了错误的属性 @Component：

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  pipes: [FilterPipe], // This line is wrong, pipes doesn't exists
  styleUrls: ['./dialog.component.css']
})

实际上，这个错误很好地说明了这一点。

你需要把它改成providers，像这样：

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  providers: [FilterPipe],
  styleUrls: ['./dialog.component.css']
})

并将其注入组件的构造函数中，如下所示：

constructor(private filterPipe: FilterPipe) { }

创建了一个简单的StackBlitz DEMO 供您查看实际情况。

Answer 2

你能发布完整的代码吗..导入自定义管道过滤器文件时似乎有错误.. 您必须首先在该组件的模块中导入自定义管道过滤器文件，然后必须在模块的声明中声明.. 在该组件的 module.ts 文件中

import {AdvancedFilterPipe} from './basic-filter.pipe';

//Declare pipe

@NgModule({

    imports: [DataTableModule, HttpModule, CommonModule, FormsModule, ChartModule, RouterModule],

    declarations: [ DashboardComponent, AdvancedFilterPipe],

    exports: [ DashboardComponent ],

    providers: [{provide: HighchartsStatic}]

})

您可以查看以下文章，了解如何在 Angular 中创建和使用自定义管道。 http://musttoknow.com/create-custom-pipe-use-datatable-ngfor-angular/

使用简单的方法..它节省了我的时间。