ionic開発入門による新しいページの作成と新しいページへのナビゲート

2330 ワード

基本的な概念はここを参考にすることができます:Ionic 2 With Type Script入門補充記録の少し出会った問題.
1.新しいページの作成
新しいプロジェクトを作成すると、ホームページが表示されます.ここでは、ListPageという新しいページを作成する例として、homepageのようにひょうたんのようにListPageを描く.html:

  
    
      List Page
    
  





ここのion-headerはhtmlのheadに相当し、ion-contentはbodyに相当する.ここのion-navbarに注意して、これを追加してナビゲーションを使用します.
ListPage.ts:
import { Component } from '@angular/core';
import {NavController} from "ionic-angular";

@Component({
  templateUrl: 'list.html'
})
export class ListPage {
  constructor(public navCtrl: NavController) {
    console.log('List Page Constructor initialization!');
  }
}

ここのconstructorはコンストラクション関数で、新しいページを生成するときに実行され、初期化をここに置くことができます.
2.新しいページに移動
ホームでtsに新しいページにナビゲートするコードを追加
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {ListPage} from "../list/list";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController) {//    ,     ,          (new   )
    console.log('Home Page Constructor initialization!');
    //       
    this.navCtrl.push(ListPage, {
     //     
      id: 123,
      name: "list"
    });
  }
}

エラーが検出されました:
Did you add it to @NgModule.entryComponents?

ここではappが必要ですmodule.tsの@NgModuleに新しいページを登録します.
declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],

その中のListPageはlistである.tsファイルで定義されたクラス名.新しいページpushが入ってきて、上部のナビゲーションバーから前のページに戻ることもできます.
3.ボタンでジャンプ
ホームでtsにボタンを追加


ホームでtsにpushPageメソッドを追加
pushPage(){
    console.log('button click!');
    this.navCtrl.push(ListPage, {
      id: 123,
      name: "list"
    });
  }

so easy!しかし、なぜ多くの中国語の文書を見ても(click)="pushPage()"という文法が書かれていないのか.英語のionic documentationでは詳しく書かれています.おかしい.
関連githubアドレス:https://github.com/codeqian/listPageDemo