如何在代码中而不是在模板中设置Angular事件绑定语句？

Question

有没有办法在代码中（而不是在模板中）设置事件绑定语句？

我想动态地构建菜单，我可以使用路由（因为它们是字符串）来做到这一点，但是不能使用事件名称来做到这一点。

这是我想做的一个例子：

component.ts代码：

menuItems = [
    { title: 'Invite Users', icon: 'account-multiple-plus', clickEvent: 'invite()' },
    { title: 'Users', icon: 'account-multiple', clickEvent: 'showUsers()' },
    { title: 'Log out', icon: 'settings', clickEvent: 'logout()' },
  ];

和component.html：

        <ng-template let-item let-last="last" ngFor [ngForOf]="menuItems">
          <button mat-menu-item (click)="item.clickEvent">
            <mat-icon svgIcon="{{item.icon}}"></mat-icon>
            <span>{{item.title}}</span>
          </button>
        </ng-template>

没用 我想我需要评估变量item.click而不是将其用作文字。是否有解决方案或替代方案？

Answer 1

用角度看的方式，您只是绑定字符串，而不是事件。

您可以执行以下操作，替换

menuItems = [
    { title: 'Invite Users', icon: 'account-multiple-plus', clickEvent: 'invite()' },
    { title: 'Users', icon: 'account-multiple', clickEvent: 'showUsers()' },
    { title: 'Log out', icon: 'settings', clickEvent: 'logout()' },
];

与

menuItems = [
    { title: 'Invite Users', icon: 'account-multiple-plus', clickEvent: this.invite },
    { title: 'Users', icon: 'account-multiple', clickEvent: this.showUsers },
    { title: 'Log out', icon: 'settings', clickEvent: this.logout },
];

现在，您具有单击时将要触发的实际功能，而不仅仅是一个字符串。

从您的模板中：

 <button mat-menu-item (click)="item.clickEvent()">