Angular 2 + ionic 2：依赖于* ng的过滤函数依赖于其他页面

Question

我有一个简单的离子列表和一个过滤器来显示匹配某个键的项目：value;我不知道我是否做得对，如果有更好的方式请告诉我。

LIST.HTML

<ion-content class="listPage"> 
    <button ion-item [ngClass]="{active: type =='all'}" (click)="filter('all')">all</button> 
    <button ion-item [ngClass]="{active: type =='red'}" (click)="filter('red')">red</button> 
    <button ion-item [ngClass]="{active: type =='blue'}" (click)="filter('blue')">blue</button> 

    <ion-list class="task-list"> 
     <button ion-item class="task-item" *ngFor="#item of list" [hidden]="isFilter(item.type)"> 
      <h2>{{item.title}}</h2> 
      <p>{{item.type}}</p> 
     </button> 
    </ion-list> 
</ion-content> 

LIST.JS

export class ListPage { 
    static get parameters() { 
    return [[NavController]]; 
    } 

    constructor(nav) { 
    this.nav = nav; 
    this.typeFilter = 'all'; 

    this.list = [ 
     { 
      "title": "Anastasia T. Benton", 
      "type": "red" 
     }, 
     { 
      "title": "Adena C. English", 
      "type": "blue" 
     }, 
    ] 
    } 



    filter(itemFilter) { 
     this.typeFilter = itemFilter; 
    } 

    isFilter(itemType) { 
     if (this.typeFilter == 'all') { 
      return false; 
     } else { 
      return itemType != this.typeFilter; 
     } 
    } 

} 

到目前为止，它的工作原理很好，它显示在右侧列表项目当我点击按钮的记者。

现在我想把这个“过滤器”放在app.js的侧边菜单上，但是这个功能不起作用，我不知道如何解决它。

LIST.HTML

<ion-navbar *navbar> 
    <button menuToggle> 
    <ion-icon name="menu"></ion-icon> 
    </button> 
    <ion-title>List</ion-title> 
</ion-navbar> 

<ion-content class="listPage"> 
    <ion-list class="task-list"> 

     <button ion-item class="task-item" *ngFor="#item of list" [hidden]="isFilter(item.type)"> 
      <h2>{{item.title}}</h2> 
      <p>{{item.type}}</p> 
     </button> 

    </ion-list> 
</ion-content> 

APP.HTML

<ion-menu [content]="content"> 

    <ion-toolbar> 
    <ion-title>List Filter</ion-title> 
    </ion-toolbar> 

    <ion-content> 
    <ion-list> 
     <button ion-item [ngClass]="{active: type =='all'}" (click)="filter('all')">all</button> 
     <button ion-item [ngClass]="{active: type =='red'}" (click)="filter('red')">red</button> 
     <button ion-item [ngClass]="{active: type =='blue'}" (click)="filter('blue')">blue</button> 
     <button ion-item [ngClass]="{active: type =='orange'}" (click)="filter('orange')">orange</button> 
     <button ion-item [ngClass]="{active: type =='greene'}" (click)="filter('greene')">green</button> 
    </ion-list> 
    </ion-content> 
</ion-menu> 

<ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav> 

APP.JS

//i know i need to do something here. about dependencies, but i can't figure out how :/ 

我也想展示当过滤器的结果是一个空列表时，可以是（可以是a）。

本周我开始学习Ionic 2和Angular 2，我正在努力。关于Angular的唯一知识，我从CodeSchool中学到了“用Angular.js构建” 我已经了解了很多关于html5，scss，jQuery和一些基于javascript的知识。 到目前为止，我不知道打字稿。

对不起，没有一个生动的例子，但我不知道如何建立一个角。否则，我会这样做。

感谢您的帮助。

Answer 1

你想要做的是将你的列表数据管理移动到一个服务。（你可以生成ionic g provider service-name空服务）

你的服务必须是这个样子：

import {Injectable} from 'angular2/core'; 
import 'rxjs/add/operator/map';  

    @Injectable() 
    export class ListService {  

constructor() { 
this.typeFilter = 'all'; 
    this.list = [ 
     { 
      "title": "Anastasia T. Benton", 
      "type": "red" 
     }, 
     { 
      "title": "Adena C. English", 
      "type": "blue" 
     }, 
    ] 
    } 

    filter(itemFilter) { 
     this.typeFilter = itemFilter; 
    } 

    isFilter(itemType) { 
     if (this.typeFilter == 'all') { 
      return false; 
     } else { 
      return itemType != this.typeFilter; 
     } 
    } 
} 

在你@App您将注入提供一个存储在该服务：

import {ListService} from './providers/list-service/list-service' 


@App({ 
    templateUrl: 'build/app.html', 
    providers: [ListService] , 
    config: {} // http://ionicframework.com/docs/v2/api/config/Config/ 
}) 
class MyApp { 

constructor(public listService: ListService) { 

... 

所以现在你可以在你的应用程序模板中使用listService，如：

<button ion-item [ngClass]="{active: type =='all'}" (click)="listService.filter('all')">all</button> 

要在您的List @Page中使用此服务，您必须注入不同的内容;不要在providers数组中声明它;而不是仅仅做它的构造：

export class ListPage { 
    static get parameters() { 
    return [[NavController, ListService]]; 
    } 

    constructor(nav, listService) { ... } 

现在，您可以参考listService在列表中的模板，如：

<button ion-item class="task-item" *ngFor="#item of listService.list" [hidden]="listService.isFilter(item.type)"> 

同样，请确保您不添加ListService到供应商阵列末页;这将创建服务的第二个实例，因此您将拥有两组不同的数据（一个用于应用程序，一个用于页面）。