0

blazor wasm アプリの読み込み時に引用符を表示したいと考えています。この msg クラスにアクセスする方法。スクリプトを index.html ヘッダー タグに入れました。しかし、これにアクセスできませんか？

<script>
  fetch("https://localhost:44359/data/Quotes.json")
    .then(res => res.json())
    .then(data => console.log(data.quotes));

  document.querySelector("body").innerHTML = "hey";
</script>
</head>

<body>
  <app>
    <div class="loading-page">
      <div class="quotes">
        <div class="msg"></div>
        <div class="author"></div>
      </div>
      <div class="loader mt-5">
        <div class="loader-dot dot1"></div>
        <div class="loader-dot dot2"></div>
        <div class="loader-dot dot3"></div>
      </div>
    </div>
  </app>


  <script src="_framework/blazor.webassembly.js"></script>

  <script>
    navigator.serviceWorker.register("service-worker.js");
  </script>

</body>

方法はありますか???

4

1 に答える 1

1

これはあなたがそれを行うべき方法です：

<body>
    <app><div id="message"></div></app>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss"></a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script>
        (function () {
            var quote = document.getElementById("message");
            fetch("sample-data/quotes.json")
                .then(res => res.json())
                .then(data => quote.innerHTML = data[1].msg + "<br /><br />" + data[1].author);

         
        })();
    </script>
</body>

wwwroot フォルダーに sample-data という名前のフォルダーを作成し、その中に次のデータを含む json ファイルを作成します。

quotes.json

    [
  {
    "msg": "It is a far, far better thing that I do, than I have ever done; it is a far, far better rest I go to than I have ever known.",
    "author": "Charles Dickens"

  },
  {
    "msg": "All we have to decide is what to do with the time that is given us.",
    "author": "J.R.R. Tolkein"

  },
  {
    "msg": "It matters not what someone is born, but what they grow to be.",
    "author": "J.K. Rowling"

  }
]

注: 画像、テキスト スライダーなど、必要なマークアップを app 要素に挿入し、好きな操作を行うことができます...ただし、重要なことは、すべてのコードが即時関数内にあることです。サンプルに配置されているのと同じ場所に。

于 2020-07-17T23:28:08.930 に答える