Question

我试图理解为什么这段代码不能按角度工作

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);
}

点击

控制台时出现错误

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

我知道，（单击）效果很好，但是我需要理解为什么不能在角度项目中使用纯JavaScript

请不要让我-1我正在学习，并不完美 =（

Answer 1

是的，就像其他事件一样。

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

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

Answer 2

每个有角度的文档

在编写绑定时，请注意模板语句的执行上下文。模板语句中的标识符属于特定的上下文对象，通常是控制模板的Angular组件

每个MDN网络文档

GlobalEventHandlers mixin的onclick属性是用于处理给定元素上的单击事件的EventHandler。

结论=>归结为封装或作用域。使用onclick时，浏览器尝试在不存在myFunction（）的全局上下文中查找它，因为它已在组件范围中注册。因此，纯Javascript是允许使用的。在这种情况下，Angular只是试图“提供帮助”。

Answer 3

Angular CLI使用幕后的webpack构建代码。每个ts文件都由TypeScript转换为js，并且该js文件中的所有代码都有单独的作用域。

因此您的myFunction不在全球可用。它不是作为window.myFunction属性创建的。

无论如何，您都可以尝试将函数手动定义为window属性，这应该可以工作：

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

Answer 4

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

Answer 5

请这样使用；

HTML页面

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

TypeScript-CreateComponent

注意：在createComponent类中定义myFunction

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

重要：请注意，由于JavaScript是TypeScript的子集，因此可以在TypeScript项目中编写普通的旧JavaScript，而不会出现任何问题，如果您打算使用外部，则只需执行一些步骤。具有TypeScript的JavaScript库。

阅读：https://www.techiediaries.com/use-external-javascript-libraries-typescript-projects/

onclick标记按钮无法以角度显示

5 个答案: