Я использую внешний javascript файл в angular 8. Это показывает ошибку, что функция не определена. Но я определил функцию

Question

В этом коде я пытаюсь использовать внешний javascript для переключения видимости пароля. Но это показывает ошибку.

Это мой Html код

<input type="password" value="FakePSW" id="myInput">
<button (click)="func()">Show Password</button>

Это мой component.ts

import { Component } from '@angular/core';
declare const myFunction:any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angularSecond';
  name:string = 'name';
  allowNewServer = false;  

  constructor()
  {

  }
  func()
  {
    myFunction();
  }
}

Это мой angular. json file

 "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "src/assets/jquery.js"
            ]

Это мой внешний javascript file

function myFunction() {
    var x = document.getElementById("myInput");
    if (x.type === "password") {
      x.type = "text";
    } else {
      x.type = "password";
    }
  }

эта ошибка отображается на веб-странице

AppComponent.html:7 ERROR ReferenceError: myFunction is not defined
    at AppComponent.func (app.component.ts:20)
    at Object.eval [as handleEvent] (AppComponent.html:7)
    at handleEvent (core.js:43993)
    at callWithDebugContext (core.js:45632)
    at Object.debugHandleEvent [as handleEvent] (core.js:45247)
    at dispatchEvent (core.js:29804)
    at core.js:42925
    at HTMLInputElement.<anonymous> (platform-browser.js:2668)
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:39680)

Answer 1

Сначала вы должны экспортировать функцию из файла javascript.

объявление функции:

export function myFunction() {
     ...
}

Затем вам нужно импортировать ее в верхнюю часть angular составная часть. Вместо

declare const myFunction:any;

Это будет

import {myFunction} from 'filepath to file';

И вам следует go использовать myfunction в вашем angular проекте.