离子3懒加载管道

时间:2018-05-18 13:58:25

标签: angular ionic3 angular5 angular6

虽然我使用“| orderBy:['id'];”在我的模板中,我收到以下错误。我的项目在Ionic 3懒加载。 enter image description here

3 个答案:

答案 0 :(得分:1)

Angular 2+没有内置orderBy,就像Angular 1一样。 您必须自己实现,然后从您将使用它的模块将其添加到提供程序的数组中。

来自Angular doc的官方解释:

  

Angular没有FilterPipe或OrderByPipe   在本页的附录中解释。

     

Angular不提供用于过滤或排序列表的管道。   熟悉AngularJS的开发人员将这些知道为filter和orderBy。   Angular没有等价物。

     

这不是疏忽。 Angular不提供这样的管道,因为它们   表现不佳并防止侵略性缩小。过滤器和   orderBy需要引用对象属性的参数。前   在这个页面中,你了解到这样的管道必须是不纯的   角度调用几乎在每个变化检测周期中都会产生管道。

答案 1 :(得分:0)

您应该创建自定义@Pipe:

请查看resolve的这个问题。

答案 2 :(得分:0)

所以在Angular 2+中你必须编写/使用第三方管道而且没有“内置”命令,正如Christian指出的那样。 在延迟加载的模块中使用它添加到项目中的管道非常简单:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FeedPage } from './feed.page';
import { TimeAgoPipe } from '../../pipes/time-ago.pipe';
import { ReversePipe } from '../../pipes/reverse.pipe';

@NgModule({
  declarations: [
    FeedPage,
    TimeAgoPipe,
    ReversePipe
  ],
  imports: [
     IonicPageModule.forChild(FeedPage),
  ]
})
export class FeedPageModule {}

然后在你的页面内(在这个例子中是我的feedPage):

<ion-content>
  <ion-card *ngFor="let item of feedItems | async | reverse">
    <ion-item>
      <h2>{{ item.username }}</h2>
      <p>{{ item.updatedAt | timeAgo }}</p>
    </ion-item>
    <ion-card-content>
    </ion-card-content>
  </ion-card>
</ion-content>