angular - 在 Angular 2 typescript 中将函数作为 JSON 数据传递

Question

我将 Angular 2.0.0 与 Typescript 一起使用，并尝试构建一个基于组件接收的 JSON 数组工作的动态菜单系统。

var menu = [
{id:"menu1", title: " Menu 1", action: "addUser()"},
{id:"menu2", title: " Menu 2", action: "addPhoto()"},
{id:"menu3", title: " Menu 3", action: "addEmail()"}
]

我想知道以下内容

• 如何动态设置菜单上的点击 Action ？
• 我是将 Renderer 与 ElementRef 一起使用，还是使用 DynamicComponentLoader？
• 如何将“操作”点击函数表示为上面 JSON 数组的一部分？

感谢您的帮助。

Answer 1

(click)="item.action" 不起作用。

你应该做类似的事情而不是:

(click)="onClick(item)"

然后根据 item.action 中的值处理逻辑

     onClick(item) { 
          switch (item.action){
            case 'addUser()' :
              this.addUser()
              break;
            case 'addPhoto()' :
              this.addPhoto()
              break;
            default : whatever();
          }
     }

或者另一种选择是:

通过从您的操作中删除 () 将您的 menu 更改为:

  var menu = [
    {id:"menu1", title: " Menu 1", action: "addUser"},
    {id:"menu2", title: " Menu 2", action: "addPhoto"},
    {id:"menu3", title: " Menu 3", action: "addEmail"}
  ]

比起在你的模板中做: (click)="item.action ?this[item.action].call(this) : 'return false;'"

或者只是: (click)="this[item.action].call(this)" 如果您的 item.action 是强制性的