onclick 标签按钮在角度不起作用

Question

I try to understand why this code doesn't work in angular

HTML :

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

TYPESCRIPT

@Component({
  selector: 'app-create',
  templateUrl: './create.component.html',
  styleUrls: ['./create.component.css']
})

export class CreateComponent {

  constructor() {}

}


function myFunction(hello: string) {
  console.log(hello);
}

The error in console when I click

Uncaught ReferenceError: myFunction is not defined
    at HTMLButtonElement.onclick (create:1)
onclick @ create:1

I know, (click) works perfect, but i need understand why cant use pure javascript in angular project

PLEASE don't put me -1 I Am learning, Am not perfect =(

Answer 1

Yes, just like any other event.

<button (click)=”handleClick($event)” type=”button”>Button</button>

handleClick(event: Event) {
  console.log(‘Click!’, event)
}

Answer 2

Angular CLI builds your code with webpack under the hood. Each ts file is transpiled by TypeScript to js and all code in this js file has separated scope.

So your myFunction is not globally available. It is not created as window.myFunction property.

Anyway you can try defining that function as a window property manually and this should work:

window['myFunction'] = function myFunction(hello: string) {
  console.log(hello);
}

Answer 3

Per angular docs

When writing a binding, be aware of a template statement's execution context. The identifiers in a template statement belong to a specific context object, usually the Angular component controlling the template

Per MDN web docs

The onclick property of the GlobalEventHandlers mixin is the EventHandler for processing click events on a given element.

Conclusion => It comes down to encapsulation or scope. When onclick is used, the browser attempts to find myFunction() in the global context where it does not exist since it is registered in the component scope. Thus, pure javascript is allowed in angular. Angular is just trying to "help" in this instance.

Answer 4

您需要在 createComponent 类中定义 myFunction ，因为当您单击时，将在组件类而不是整个 ts 文件中搜索绑定到事件的函数。

Answer 5

Please use like this;

HTML page

<button (click)="myFunction('hello')">Click me</button>

TypeScript - CreateComponent

Note : Define myFunction inside the createComponent class

myFunction(hello: string) {
    console.log(hello);
}

Important : Please note that ,you can write plain old JavaScript in a TypeScript project without any problems since JavaScript is a subset of TypeScript ,you only need some steps if you are planning to use an external JavaScript library with TypeScript.

Read this : https://www.techiediaries.com/use-external-javascript-libraries-typescript-projects/