Question

将动态函数绑定到click事件时遇到了一些麻烦。请参阅以下内容： -

档案1

<title-bar [actions]='[{title: "Create A New Plan", link: "hello"}]' ></title-bar>

文件2

<div class="actions" *ngIf="actions">
    <a *ngFor="let action of actions" class="ui primary button" (click)="[action.link]()">{{action.title}}</a>
</div>

除了在（点击）中绑定action.link时，所有代码都完美无缺。

如果我创建以下按钮： -

<button (click)="hello()"></button>

它应该调用hello（）函数。但出于某种原因，我无法动态地使用它。

有没有人有一个简单的解决方案，我可能已经看过了？

该功能只是为了测试而调用一个简单的警报： -

public hello() {
    alert('test');
}

我试图将点击事件更改为以下但没有任何乐趣： -

(click)="action.link"
(click)="[action.link]()"
(click)="this[action.link]()"

我分别得到以下错误： -

No error, but not function called
inline template:3:2 caused by: ["hello"] is not a function
inline template:3:2 caused by: self.parentView.parentView.context[self.context.$implicit.link] is not a function

非常感谢任何推动正确方向的帮助。

Answer 1

~~在你需要的组件中~~

get self() { return this; }

并在模板中

<a *ngFor="let action of actions" class="ui primary button" (click)="self[action.link]()">{{action.title}}</a>

<击>

使用

<a *ngFor="let action of actions" class="ui primary button" (click)="this[action.link]()">{{action.title}}</a>

Answer 2

这对我有用：

credentials

Answer 3

我需要对ngFor做类似的事情。可接受的答案有效，但给了我一个错误的错误：“通话目标不可通话”

Günter还有一个SO答案，它帮助我找到了不起毛的解决方案：Angular2 passing function as component input is not working

我的component.ts

this.myLinks = [
  {
    imgSrc: 'assets/a.png,
    clickFunction: this.aFn,
  },
  {
    imgSrc: 'assets/b.png,
    clickFunction: this.bFn,
  },
];


aFn() {
  console.log('function A');
}
bFn() {
  console.log('function B');
}

我的template.html

<div *ngFor="let link of myLinks">
   <img
     [src]="link.imgSrc"
     (click)="link.clickFunction.apply(this)"
   />
</div>

Answer 4

Component.ts

items = [
  {
    name: 'share',
    action: this.share
  },
  {
    name: 'report',
    action: this.report
  }
];

share() {}
report() {}

Component.html

<el *ngFor="let i of items" (click)="i.action()"></el>

动态（单击）功能 - Angular2

4 个答案: