http://twosquirrel.mints.ne.jp/?p=24938

Ionic3でクイズアプリを写経してみる（１）

でやったことを、Ionic4でもやってみたい。

tryしてみる。

https://www.joshmorony.com/create-a-data-driven-quiz-app-in-ionic-2-part-1/

npm install -g ionic

C:/ionic4/ フォルダを、VisualStudioCodeで開いて、Ctrl+@でターミナルを開いて、以下を入力。

ionic start ionic4-kids-quiz blank --type=angular
// ? Install the free Ionic Pro SDK and connect your app? と聞かれたら、 N + Enter

一度、VisualStudioCodeを閉じてから、
C:/ionic4/ionic4-kids-quiz/ フォルダを、VisualStudioCodeで開いて、Ctrl+@でターミナルを開いて、以下を入力。

ionic serve -l
// ? Install @ionic/lab? と聞かれたら、 Y + Enter

serviceの作成は、Ionic3ではionic g provider でしたが、Ionic4では、ionic g service になりました。

ionic g component components/FlashCard
ionic g service services/Data

いきなりSCSSのコピペでがっくりだが、ここは我慢して、
https://www.joshmorony.com/create-a-data-driven-quiz-app-in-ionic-2-part-1/　の、flash-card.scssをコピペする。

src/components/flash-card.scss

(変更後)

src/components/flash-card/flash-card.html

(変更前)

(変更後)

src/components/flash-card/flash-card.ts

(変更前)

(変更後)

このflash-card componentは、後で、以下の記載でHomePageに埋め込む予定である。

<flash-card [isFlipped]="someVariableWeToggle"></flash-card>

src/app/home/home.page.html

(変更前)

(変更後)

ionic serveのところは真っ黒だが、Ctrl+Shift+I で、Errorの内容を確認すると、以下のようになっている。

src/app/home/home.page.ts

(変更前)

(変更後)

参考：Ionic4でルーティング

https://www.joshmorony.com/create-a-data-driven-quiz-app-in-ionic-2-part-1/