00.stencil:03.stencilの_propと_state

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.stencil:03.stencilの_propと_state [2019/09/26] – [@state()の解説のリンク] adash333
+++ 00.stencil:03.stencilの_propと_state [2019/09/26] (現在) – [@state()の解説のリンク] adash333
@@ 行 67: / 行 67: @@
 https://www.joshmorony.com/building-a-pwa-with-stencil-storage-and-services/ では、
-親コンポーネント で、
+コンポーネント  src/components/app-home/app-home.tsx で、
 <code>
   @State() holdings: Holding[] = [];
-<code/>
+</code>
-とすることで、
+と、holdingsに@State()をつけることで、
+<code>
+  componentDidLoad() {
+    const router = document.querySelector("ion-router");
+    // Refresh data every time view is entered
+    router.addEventListener("ionRouteDidChange", async () => {
+      const holdings = await Holdings.getHoldings();
+      this.holdings = [...holdings];
+    });
+  }
+</code>
+により、ページのアドレスが変化するたびに、holdingsが再描画されて、表示されるものが最新のものになるようにしています。

00.stencil/03.stencilの_propと_state.1569461324.txt.gz · 最終更新: 2019/09/26 by adash333