node.js - Angular 我如何在元件中使用嵌入腳本

我正在嘗試在 Angular 中設置一種只有在直播在線時才顯示 Twitch 播放器的方法，所以在文檔中有這個內聯 HTML：

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

當然，在 Angular 元件中我們不能使用 <script> 標籤，而且我認為目前也無法在我的元件的 TypeScript 中使用 require 或 import 來使用這個。

那我該如何添加這個功能呢？我明白在我能真正引用那個 script 標籤之後該怎麼做。

答案＃1

你可以動態地創建一個 script 標籤，但我認為直接下載腳本並將其放入資產資料夾，然後在 angular.json 中將腳本添加到腳本列表會更容易。

或者你可以將腳本添加到 index.html 的 head 區段

index.html

<head>
    <script src= "https://player.twitch.tv/js/embed/v1.js"></script>
    ...
</head>

將此添加到元件的 ngOninit 方法

      ngOnInit() {
        var options = {
            width: <width>,
            height: <height>,
            channel: "<channel ID>",
            video: "<video ID>",
            collection: "<collection ID>",
          };
          var player = new Twitch.Player("<player div ID>", options);
          player.setVolume(0.5);
       }

組件範本

    <div id="<player div ID>"></div>

你可能會發現像 Twitch 的 Angular 套件這樣的解決方案可能會更乾淨一些

已更新

TypeScript 會出現像 [ts] 無法找到名稱 'Twitch'. [2304] 這樣的錯誤。有些函式庫有型別定義檔，但在我們的情況下，如果你只在這個檔案中使用 Twitch 物件，你可以加入這個語句來告訴 TypeScript 有關 Twitch 物件的資訊

declare const Twitch: any;

如果你想在多個元件上使用 Twitch

src/global.d.ts

 declare const Twitch: any;

最終建議

安裝 npm i twitch-js 並像這樣導入 Twitch 物件

import Twitch from 'twitch-js'

這將由 webpack 打包，所以你不需要在 HTML 中添加任何 script 標籤。

Twitch 開發者

答案＃2

為這個問題掙扎了一段時間。我的腳本是非同步的，最後我發現了 postscribe 套件。效果就像魔法一樣。

npm install --save postscribe

在程式碼中：

import postscribe from 'postscribe'

//The script you want to load
const script = '<script src="https://darksky.net/map-embed/@radar,41.88,-87.62,10.js?embed=true&timeControl=false&fieldControl=false&defaultField=radar"></script>';

postscribe('#yourDivName', script);