文章/答案/技术大牛

发布

社区首页 >问答首页 >将函数作为JSON数据在角2类型记录中传递

问将函数作为JSON数据在角2类型记录中传递
EN

Stack Overflow用户

提问于 2016-10-05 21:40:53

回答 2查看 2.2K关注 0票数 4

我对类型记录使用了角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()"}
]

我想知道以下几点

如何动态设置菜单上的单击操作？
我是在ElementRef中使用渲染器，还是使用DynamicComponentLoader？
如何将'action‘click函数表示为上面JSON数组的一部分？

谢谢你的帮助。

angular

typescript

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-02-01 02:27:49

(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。

票数 3

Stack Overflow用户

发布于 2016-10-05 22:02:15

要动态绑定到单击事件，请执行(click)="" --请参阅事件绑定，但由于这些都是字符串，所以它不会调用函数，您需要一个助手函数来确定要调用哪个函数，然后它将为您调用该函数

柱塞演示

这应该是可行的，你的行动方式也很好。

@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!");
  }
}

有关模板语法的更多信息

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39884163

复制

相似问题

问将函数作为JSON数据在角2类型记录中传递
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将函数作为JSON数据在角2类型记录中传递EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问将函数作为JSON数据在角2类型记录中传递
EN