如何传递从自定义管道返回到儿童组件的过滤数据？
父组件
<app-search-bar (sender)="searchVideo($event)"></app-search-bar>
<ng-container *ngFor="let video of videos | search: query; let i=index;">
...
</ng-container>
<app-pagination (sender)="setStartEnd($event)"></app-pagination>
自定义管子
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(value: any, args: any): any {
if(!value){
return null;
}
if(!args){
return value;
}
args = args.toLowerCase();
return value.filter((data: any) => {
return JSON.stringify(data).toLowerCase().includes(args);
})
}
}
子组件（应用程序 - 流动）
<div class="pagination" *ngIf="videos.length > 3">
...
</div>
我需要获取自定义管道返回的过滤数据，以便借助我可以处理分页组件中的页面数量。
Parent Component
<app-search-bar (sender)="searchVideo($event)"></app-search-bar>
<ng-container *ngFor="let video of videos | search: query; let i=index;">
...
</ng-container>
<app-pagination (sender)="setStartEnd($event)"></app-pagination>
Custom Pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform {
transform(value: any, args: any): any {
if(!value){
return null;
}
if(!args){
return value;
}
args = args.toLowerCase();
return value.filter((data: any) => {
return JSON.stringify(data).toLowerCase().includes(args);
})
}
}
Child Component (app-pagination)
<div class="pagination" *ngIf="videos.length > 3">
...
</div>
I need to get the filtered data that returned by Custom Pipe so that with the help of that I can handle the number of pages in Pagination Component.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
在这种情况下，可能不使用管道。将该逻辑移至父组件，并与模板中需要的任何组件共享输出
，或者您也可以使用两次管道（尽管对我而言，我在父级中我拥有的逻辑，而不是管道）
Possibly don't use a pipe in this case. Move that logic to the parent component and share the output with whatever components in the template need it
Or, you could also use the pipe twice (although to me its logic I'd have in the parent class, not a pipe)