Question

我正在使用带有Typescript的angular 2.0.0并尝试构建一个动态菜单系统，该系统基于组件接收的JSON数组工作。

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

我想知道以下

如何动态设置菜单上的点击操作？
我是否将Renderer与ElementRef一起使用，还是使用DynamicComponentLoader？
我如何表示＆＃39;行动＆＃39;单击函数作为上面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是强制性的，则tf.bool

Answer 2

要动态绑定到click事件，请执行(click)=""请参阅Event Binding，但由于这些是技术上的字符串，因此无法调用函数，因此需要辅助函数来确定函数你想打电话然后它会为你调用这个功能

Plunker演示

这应该有效，你采取行动的方式很好

@Component({
  selector: 'my-app',
  template: `
      <div class="link" [id]="item.id" *ngFor="let item of menu"
        (click)="callFunction(item.action)">
          {{ item.title }}
      </div>
  `,
})
export class App {
  menu: any;
  constructor() {
    this.menu = [
      {id:"menu1", title: "Add User", action: "addUser()"},
      {id:"menu2", title: "Add Photo", action: "addPhoto()"},
      {id:"menu3", title: "Add Email", action: "addEmail()"}
    ]
  }

  callFunction(func) {
    switch(func) {
      case "addUser()": 
        this.addUser()
        break;
      case "addPhoto()": 
        this.addPhoto()
        break;
      case "addEmail()": 
        this.addEmail()
        break;
      default:
        alert("Not found")
    }
  }

  addUser() {
    alert("Add User Called!");
  }
  addPhoto() {
    alert("Add Photo Called!");
  }
  addEmail() {
    alert("Add Email Called!");
  }
}

有关Template Syntax

的更多信息

将函数作为角度2打字稿中的JSON数据传递

2 个答案:

Plunker演示