Ionic 2 각 목록 요소 버튼의 다른 페이지로 이동

Question

저는 Ionic 2 플랫폼과 각도 2에 익숙합니다.

이미 배열에서 가져온 이름을 표시하는 카드 요소가 나열되어 있으며 각 카드에는 동일한 버튼이 있지만 모든 카드는 특정 페이지로 이동해야합니다.

나는 웹에서 보았다하지만 난 너희들 :

이 calcs.ts

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 
import { AuthService } from '../../services/auth/auth.service'; 
import { NavController } from 'ionic-angular'; 
import { Calc1 } from '../calculators/calc1/calc1'; 
import { Calc2 } from '../calculators/calc2/calc2'; 
import { Calc3 } from '../calculators/calc3/calc3'; 
import { Calc4 } from '../calculators/calc4/calc4'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 

@Component({ 
    templateUrl: 'calcs.html', 

}) 

export class Calculators { 
    items: any; 

    constructor(public nav: NavController, private http: Http, private authHttp: AuthHttp, public auth: AuthService) { 

     this.initializeItems(); 

    } 

    initializeItems() { 
     this.items = [ 
      { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' }, 
      { CalcPage: Calc2, CalcName: 'Some Other Calculator' }, 
      { CalcPage: Calc3, CalcName: 'Another Calculator' }, 
      { CalcPage: Calc4, CalcName: 'One Last Calculator' } 
     ] 
    } 

    getItems(ev) { 
     // Reset items back to all of the items 
     this.initializeItems(); 

     // set val to the value of the searchbar 
     let val = ev.target.value; 

     // if the value is an empty string don't filter the items 
     if (val && val.trim() != '') { 
      this.items = this.items.filter((item) => { 
       return (item.CalcName.toLowerCase().indexOf(val.toLowerCase()) > -1); 
      }) 
     } 
    } 
} 

이며,이 입니다 그것을 요구하고 그래서 여기에 대해 아무것도 볼 수 없었다 고려해야 할 calcs.html

<ion-header> 
    <ion-navbar color="dark"> 
    <ion-title text-center>Calculators</ion-title> 
    </ion-navbar> 
</ion-header> 

<ion-content padding> 
<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> 

    <ion-card *ngFor="let item of items" > 
    <ion-card-content> 
     <h2> 
     {{item.CalcName}} 
     </h2> 
    </ion-card-content> 
    <ion-row no-padding> 
     <ion-col> 
     <button ion-button clear small icon-left color="dark"> 
      <ion-icon name='calculator'></ion-icon> 
      calculate 
     </button> 
     </ion-col> 
     <ion-col text-right> 
     <button ion-button clear small color="danger" icon-left> 
      <ion-icon name='heart-outline'></ion-icon> 
      favourite 
     </button> 
     </ion-col> 
    </ion-row> 
    </ion-card> 

</ion-content> 

한 가지입니다 calcs.t에서 S :

initializeItems() { 
    this.items = [ 
     { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' }, 
     { CalcPage: Calc2, CalcName: 'Some Other Calculator' }, 
     { CalcPage: Calc3, CalcName: 'Another Calculator' }, 
     { CalcPage: Calc4, CalcName: 'One Last Calculator' } 
    ] 
} 

CalcPage : CALC1
CalcPage : CALC2
CalcPage : Calc3
CalcPage : Calc4

app.component에 등록 된 사람들은 실제 페이지 이름이다

Answer 1

당신은 꽤 가깝습니다 ... 단지 HTML 코드를 수정하여 다음과 같은 클릭 이벤트를 처리하십시오 :

,210

<button (click)="openPage(item)" ion-button clear small icon-left color="dark"> 
    <ion-icon name='calculator'></ion-icon> 
    calculate 
</button> 

그리고 구성 요소의 코드에서 openPage 방법 추가 : 당신이 버튼을 클릭하고 해당 항목에 고유 한 새 페이지로 이동 할 수 있어야 목록의 각 항목에 대해 그래서

import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 
import { AuthService } from '../../services/auth/auth.service'; 
import { NavController } from 'ionic-angular'; 
import { Calc1 } from '../calculators/calc1/calc1'; 
import { Calc2 } from '../calculators/calc2/calc2'; 
import { Calc3 } from '../calculators/calc3/calc3'; 
import { Calc4 } from '../calculators/calc4/calc4'; 
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/debounceTime'; 

@Component({ 
    templateUrl: 'calcs.html', 

}) 

export class Calculators { 
    items: any; 

    constructor(public nav: NavController, private http: Http, private authHttp: AuthHttp, public auth: AuthService) { 
     this.initializeItems(); 
    } 

    initializeItems() { 
     this.items = [ 
      { CalcPage: Calc1, CalcName: 'Automobile Expense Calculator' }, 
      { CalcPage: Calc2, CalcName: 'Some Other Calculator' }, 
      { CalcPage: Calc3, CalcName: 'Another Calculator' }, 
      { CalcPage: Calc4, CalcName: 'One Last Calculator' } 
     ] 
    } 

    getItems(ev) { 
     // Reset items back to all of the items 
     this.initializeItems(); 

     // set val to the value of the searchbar 
     let val = ev.target.value; 

     // if the value is an empty string don't filter the items 
     if (val && val.trim() != '') { 
      this.items = this.items.filter((item) => { 
       return (item.CalcName.toLowerCase().indexOf(val.toLowerCase()) > -1); 
      }) 
     } 
    } 

    public openPage(item: any): void { 
     this.nav.push(item.CalcPage); 
    } 
}