Question

我有一个要求，我需要在角应用程序中调用非角度函数。如下所示：

 <div class="actions" onclick="edituser()">
  <app-list></app-list>
</div>

注意：

我不能在这里使用（点击）因为我想从jquery执行这个点击功能。

在我的.ts文件中，我尝试添加以下代码：

declare var edituser : () => void;
edituser() {
  alert('hiii');
}

但我收到错误：

edituser函数未定义。

如果有任何可行的方法，请告诉我。

Answer 1

好像没有人给你一个问题的实际答案......在这里，让我帮忙：

<button onclick="window.editUser()">Edit user</button>

在你的TS中：

constructor(
  private zone: NgZone
) {}

ngOnInit() {
  this.zone.run(() => {
    window['editUser'] = () => { alert('Hey sexy'); }; // should be TS compliant 
  });
}

ngOnDestroy() {
  delete(window['editUser']); // Good practice to remove it
}

虽然使用ngZone不是强制性的，但我知道如果你想要接触角度上下文之外的某些代码，你应该使用它，所以我给你这样做，你自己选择。

Answer 2

您仍然可以使用angular2（click）处理程序来触发使用JQuery的打字稿文件/组件中的函数。

import { Component } from '@angular/core';

declare var $: any;

@Component({
  selector: 'my-app',
  template: `
            <button (click)="editUser()">Edit user</button>
            <h6 id="user-label">User here</h6>
            `
})
export class AppComponent  {
    editUser() {
        $('#user-label').css( "color", "red" );
    } 
}

确保已将JQuery库正确导入项目中。如果您正在使用角度CLI，则需要在＆＃39;脚本中引用它。 .angular-cli.json配置文件中的数组。

Answer 3

首先，将Angular与jQuery结合起来并没有多大意义。 Angular是一个平台，其主要优点是您不应该自己触摸DOM。 jQuery是一个库，可以让您轻松访问DOM。这是一个糟糕的组合。

现在为你的麻烦。您可以和使用Angular提供给您的(click)输出。

<button (click)="handleClick()">
  <app-list></app-list>
</button>

现在在您的组件代码中：

handleClick() {
  edituser()
}

但是，这假设edituser函数存在于全局范围内（在浏览器中，这相当于window.edituser）。

您所写的内容（declare var edituser : () => void）只是声明。它有助于TypeScript理解有一个全局函数允许你使用它，即使它是一个外部定义的函数。

但是，如果您对TypeScript撒谎（通过承诺它有一个函数edituser，但它实际上不可用），您的代码将在运行时失败。 TypeScript无法做到这一点。

顺便说一句，你不应该在div HTML元素上注册点击处理程序。它们是非语义的。使用键盘浏览网站的用户无法专注于此元素。提供tabindex=0和role=button（或任何角色），或者仅使用正确的button元素，然后使用CSS对其进行不同的样式设置。

Answer 4

根据我测试的内容，您无法访问您的.tt上的.ts上定义的组件外功能

根据this issue，如果您愿意，可以在索引HTML文件中定义<script>标记，但我发现它非常难看。

另一种方法是定义一个组件内处理程序来调用更高范围的函数，如下所示：

function edituser() { alert('hiii'); }

@Component({...})
export class MyComponent {
  //...
  clickHandler(event) {
    edituser();
  }
  //...
}

 <div class="actions" (click)="clickHandler($event)">
   <app-list></app-list>
 </div>

由于您还在考虑从角度调用jQuery，我建议您阅读this guide，以防您还没有找到它。

在角度2 app中调用非角度函数

4 个答案: