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到供應商陣列末頁;這將創建服務的第二個實例，因此您將擁有兩組不同的數據（一個用於應用程序，一個用於頁面）。