飛び先がListPageですね。そもそも飛び先はどこで決めてるの?そこで、すっ飛ばしてきた(click)=”openPage(p)”>が出てくるわけですよ。(click)=”openPage()”でページ遷移しようopenPageとはなんぞや。href=”このぶぶん”></a>でーはー、解説始めます。openPageが何をしているかと言うとapp.htmlには動作が無くて、app.component.tsの方に書いてます。this.nav.setRoot(page.component);}この部分ですね。ん?app.htmlの方はopenPage(p)app.component.tsの方はopenPage(page)括弧の中違いませんか?これは間違いではありません。動いてますしapp.htmlの方は、*ngForで定義しているpを使っています。app.component.tsの方は、独自に設定したものとしてpageを使っています。試しに、app.component.tsの方のopenPage(page)をopenPage(pagedesu)に変更してみましょう。その際には、下の方にあるthis.nav.setRoot(page.component);ここもthis.nav.setRoot(pagedesu.component);へ変更します。これでも動いちゃうんですよね。合わせればよいじゃんってことになるんですが合わせても動きます。動くけど予想だと拡張していくにつれて不具合起きる気がする。app.htmlの方のopenPageは何なのよapp.htmlの方は送り側です。(click)=”openPage(p)”>クリックした際にopenPageという処理を行いなさい。その際に、(p)という情報を持っていくのよ。app.component.tsの方は何なのよapp.component.tsの方は受け取り側です。openPageの処理が来たら実行します。その際に、app.htmlから送られた情報を(page)と言う値を使って受け取ります。受け取り側なので何で受け取っても良いです。ヤマトの箱で送られてきた中身を西濃の箱に詰め替えて使っても何ら問題は無い。pとpageは同じものが入っています。引き続きapp.component.tsの中身を見ていきましょうopenPage(page)の処理は{}に囲まれた部分です。this.menu.close();でたよ、this.でもニュアンスでわかりますよね。app.htmlのion-menuを閉じなさい。一行ありますねthis.nav.setRoot(page.component);こっちもthis.だよ。こちらもなんとなくわかります。navはion-navのことですね。ion-navの内容を書き換え(set)しなさい。中身はopenPage(page)で受け取ったpageの中のcomponentを使いなさい。やってることはあまり難しくないですね。ところで、無理にopenPageという処理(メソッド名?)を使う必要はなくてたとえば両方のメソッドをopenpenPage()とかにしても動きます。ちなみにメソッドは方法や方程式という意味らしいですぜ。業界的に良くつかわれる言葉なんですが私のように極端に英語が苦手だと一瞬何のことかわかりません。ヤフー知恵袋のようなアジェンダをタスクとするメソッドは、ユーザーのスペックがコミットメントされない限りコンセンサスはエビデンスされない。利用者のジャストアイデアに偏重するフィックスはシェアの偏りを招き、タイトなレスポンス・スペースにおいてシナジーとしてのブラッシュアップをペンディングしかねない。デフォルトにナーヴァスなシーチキン巻きがモチベーションにおいて日常が担保されるのだ。参考ヤフー知恵袋のようなアジェンダをタスクとこんな感じ何年か前にコンプライアンスって言葉がやたらと流行った時期ありましたよね。今でも使われる言葉ですが、私はコンプライアンスって言葉で何件もの無理難題を回避した事があります。具体的に何の誰の法令とは言ってませんが。componentには何が入っているの?さて、ここまで見てきて大体の人は予想できていると思います。componentの中には切り替えるページの遷移先が入っているのではないか。app.component.tsのthis.pagesを見なおしましょう。},componentにはそれぞれHelloIonicPageとListPageが入ってます。これもimportしてるんじゃないでしょうか。'../pages/list/list';有りました。新しく作ったページをimportしてやりましょう。'../pages/test-moode/test-mood';こうです。{TestMoodPageと命名されています。この命名規約ですが、頭文字が大文字、-ハイフンなどの区切り先頭が大文字、そして最後にPageをつけるキャメルケース記法で生成されます。見で何を意味するかわかりやすいので便利ですよね。キャメルケース参考:変数/クラス名の命名規則に使われる記法の分類なのでそれに沿ってimport{}の中はTestMoodPagefrom”の中はtest-mood.tsまでのパスを書いてやります。次に、this.pages[]の中、追加した配列のcomponentを書き換えてやりましょう。}];上記で一応test-mood.htmlの中身を表示できるのですが実行してみるとエラーになるはずです。約ランタイムエラーエラー:TestMoodPageのコンポーネントファクトリが見つかりませんでした。エラー:TestMoodPageのコンポーネントファクトリが見つかりませんでした。NgModule.entryComponents?エラーが色々解決してくれます。@NgModule.entryComponentsに追加?どこそれこんな時はググれば大体解決しますよね。難しいのがこのentryComponentsプロパティです。このプロパティではオフラインコンパイルを行う時にエントリポイントとなるコンポーネントを指定します。Loadingのよって実行時にあとから読み込まれるコンポーネント以上のどちらかに当てはまるコンポーネントです。後者の、遅延ロードされるコンポーネントだけを指定することになります。Loadingとは遅延読み込みの事見たいです。ブログとかでテキスト読んでる間に、ふわっと画像が出てくるサイトとかあるじゃないですか、アレです。そんなのつけてねーよ。思い色々調べたんですが書いてありました。v4に対応する形でのアップデートです。Loadingが実装されました。Loadingでつくるのが一般的になりました。gしたのでちゃんと遅延読み込みが実装されてるようですね。本当にありがとうございました。Loading・・・めんどい遅延読み込み対応のページはmodule.tsが同意ディレクトリに作成されるみたいです。解決方法ですがせっかくなので遅延読み込みを実装してみましょう。importする必要はないらしいです。この2年間の進化を振り返るこちらの情報を配信されている会社の代表様です。ご参考になさって下さい。