typescript - Angular: Hur man laddar externa skript över hela applikationen i alla komponenter

Script-taggar:

<script src="https://www.test.com/dem0.js"></script>
<script src="https://www.test.com/dem01.js"></script>
<script src="https://www.test.com/dem02.js"></script>
<script src="https://www.test.com/dem03.js"></script>

Index.html:

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Mobile</title>
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="wsstitle" content="catalog">
  <meta name="wssmlc" content="/us/en/">

  <link rel="icon" type="image/png" href="favicon.ico" sizes="32x32">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
</head>

<body>
  <app-root></app-root>
</body>

</html>

Jag har några externa <script>-taggar och jag vill göra dem tillgängliga i hela appen (ska kunna ladda dem när som helst när min vy ändras i webbläsaren). Om jag inkluderar dem i min index.html <head>-tag fungerar det bara första gången när appen laddas initialt, men i mitt fall måste jag ladda dem varje gång vyn ändras. Skulle det vara en bra praxis att inkludera skripten i <body>-taggen?

Svar #1

Lägg till skriptreferensens väg i angular-cli.json under

     "scripts": [
       "../src/assets/scripts/asn1.min.js"
      ],

Att använda det i komponentens .ts-fil

deklarera var libraryName: any;

Svar #2

Här är ett exempel som visar hur man integrerar Jquery och Angular, laddar Jquery från en extern resurs: https://stackblitz.com/edit/angular-e1nf7j

Det finns annan kod i exemplet för att visa lite separation mellan Angular-kod och jQuery. Du kan skapa en Wrapper-klass för att skriva vad du än behöver med ditt bibliotek.

Den andra delen är att kontrollera din komponenters livscykel. Och Hooks kommer att göra arbetet med att köra din externa kod.

Obs: Du behöver kontrollera tiden det tar att ladda det externa biblioteket för att inte få null-referenser, för det används setTimeout()

Jag hoppas att det hjälper