node.js - Angular ฉันจะสามารถใช้สคริปต์ฝังตัวใน Component ได้อย่างไร

ฉันกำลังพยายามตั้งค่าใน Angular วิธีการแสดงเฉพาะผู้เล่น Twitch หากสตรีมกำลังออนไลน์ ดังนั้นในเอกสารมี HTML แบบ inline แบบนี้:

<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 Components เราไม่สามารถใช้แท็ก <script> ได้ และฉันก็ไม่คิดว่าตอนนี้จะสามารถใช้ require หรือ import เพื่อนำสิ่งนี้มาใช้ใน TypeScript ของ component ของฉันได้

แล้วฉันจะไปเพิ่มฟังก์ชันนี้ได้อย่างไร? ฉันเข้าใจว่าต้องทำอะไรหลังจากที่สามารถอ้างอิงแท็กสคริปต์นั้นได้จริง ๆ

คำตอบ #1

คุณสามารถสร้างแท็กสคริปต์แบบไดนามิกได้ แต่ฉันคิดว่าง่ายกว่าถ้าจะดาวน์โหลดสคริปต์มาแล้วใส่ในโฟลเดอร์ assets จากนั้นเพิ่มสคริปต์ไปที่รายการสคริปต์ใน angular.json

หรืคุณสามารถเพิ่มสคริปต์ไปที่ส่วนหัวของ index.html

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>

คุณอาจพบวิธีแก้ปัญหาอื่นเช่นแพ็กเกจ Angular สำหรับ Twitch ซึ่งอาจเป็นวิธีที่สะอาดกว่า

อัปเดตแล้ว

TypeScript จะแสดงข้อผิดพลาดเหมือน [ts] Cannot find name '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

นักพัฒนาของทวิตช์

คำตอบ #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);