ionic開発入門による新しいページの作成と新しいページへのナビゲート
2330 ワード
基本的な概念はここを参考にすることができます:Ionic 2 With Type Script入門補充記録の少し出会った問題.
1.新しいページの作成
新しいプロジェクトを作成すると、ホームページが表示されます.ここでは、ListPageという新しいページを作成する例として、homepageのようにひょうたんのようにListPageを描く.html:
ここのion-headerはhtmlのheadに相当し、ion-contentはbodyに相当する.ここのion-navbarに注意して、これを追加してナビゲーションを使用します.
ListPage.ts:
ここの
2.新しいページに移動
ホームでtsに新しいページにナビゲートするコードを追加
エラーが検出されました:
ここではappが必要ですmodule.tsの@NgModuleに新しいページを登録します.
その中のListPageはlistである.tsファイルで定義されたクラス名.新しいページpushが入ってきて、上部のナビゲーションバーから前のページに戻ることもできます.
3.ボタンでジャンプ
ホームでtsにボタンを追加
ホームでtsにpushPageメソッドを追加
so easy!しかし、なぜ多くの中国語の文書を見ても
関連githubアドレス:https://github.com/codeqian/listPageDemo
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