การส่งฟังก์ชันเป็นข้อมูล JSON ใน Angular 2 TypeScript

ฉันกำลังใช้ 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()"}
]

ฉันต้องการทราบสิ่งต่อไปนี้

• วิธีตั้งค่าการคลิกที่เมนูแบบไดนามิก?
• ฉันใช้ Renderer กับ ElementRef หรือฉันใช้ DynamicComponentLoader?
• ฉันจะแสดงฟังก์ชันการคลิก 'action' เป็นส่วนหนึ่งของอาเรย์ JSON ข้างต้นอย่างไร?

ขอบคุณสำหรับความช่วยเหลือ

คำตอบ #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 ของคุณโดยการเอา () ออกจาก actions ของคุณ:

  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 ของคุณเป็นสิ่งบังคับ

คำตอบ #2

ในการผูกกับอีเวนต์คลิกแบบไดนามิก คุณทำ (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!");
  }
}

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ ไวยากรณ์เทมเพลต

• การผูกคุณสมบัติ
• การผูกแอตทริบิวต์ คลาส และสไตล์
• การผูกเหตุการณ์