html - javascript v Angular 4

Používam Angular 4 vo Visual Studio Code. Chcem do svojho kódu zahrnúť javascriptovú funkciu.

home.component.html

 <html>
 <body>

 <button onclick="myFunction()">Click me</button>

 <p id="demo"></p>

 <script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
  </script>

</body>
</html>

Ale keď kliknem na tlačidlo, potom sa zobrazuje chyba: "Uncaught ReferenceError: myFunction is not defined at HTMLButtonElement.onclick"

Odpoveď č. 1

Môžete tiež použiť súbor so skriptom vo vašom Angular projekte.

1. vytvorte súbor js a vložte do neho svoj kód skriptu, a ten js súbor vložte do priečinka assets.
2. Teraz prejdite do koreňového adresára vašej Angular aplikácie, tam nájdete súbor s názvom .angular-cli.json

Teraz upravte ten súbor, nájdite "scripts" a napíšte "script": ["assets/your_script_file.js"].

Teraz môžete volať funkcie napísané v tom skripte vo vašom HTML súbore.

Odpoveď č. 2

V Angulare nemusíte písať JavaScriptový kód v HTML súbore.

Existuje samostatný súbor TypeScript s príponou .ts, kde môžete vložiť svoj JavaScript kód v štýle TypeScript.

Použite nižšie uvedenú štruktúru pre vyššie uvedený kód v Angulari :

home.component.html

 <button (click)="myFunction()">Click me</button>
 <p>{{demo}}</p>

home.component.ts

import {Component} from '@angular/core';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  providers: []
})
export class AppComponent {
 public demo: string;

myFunction(){
this.demo="Hello World";
}
}

Kód online: https://stackblitz.com/edit/angular-gwrvbn?file=src%2Fapp%2Fapp.component.ts