Angular2：传递一个对象以将事件从父级绑定到子级答案

【问题标题】：Angular2: Passing an object to bind event from parent to childAngular2：传递一个对象以将事件从父级绑定到子级
【发布时间】：2017-06-05 13:43:07
【问题描述】：

该绑定适用于标题、副标题、button.icon 和 button.name，但不适用于 button.action

parent.component.html

    <app-title [title]="title" [subtitle]="subtitle" [buttons]="buttons"></app-title>

parent.component.ts

export class ParentComponent {

actionOne() {
    ...
}

title = 'Title';
subtitle = 'Subtitle';
buttons = [
    { 'name': 'Name1', 'icon': 'Icon1', 'action': 'actionOne()'},
    { 'name': 'Name2', 'icon': 'Icon2', 'action': 'actionTwo()'},
    { 'name': 'Name3', 'icon': 'Icon3', 'action': 'actionThree()'}
];

}

child.component.html

<section>
<div class="text-wrapper">
        <h1>{{ title }}</h1>
        <h2 *ngIf="subtitle">{{ subtitle }}</h2>
</div>
 <template *ngIf="buttons">
        <div class="buttons-wrapper">
            <button *ngFor="let button of buttons" md-raised-button (click)="button.action"><md-icon *ngIf="button.icon">{{ button.icon }}</md-icon>{{ button.name }}</button>
        </div>
    </template>
</div>

child.component.ts

export class ChildComponent  {

@Input() title:string;
@Input() subtitle:string;
@Input() buttons:string;

}

【问题讨论】：

标签： angular binding components bind communication

【解决方案1】：

这是可以做到的：

按钮界面：

export interface IButton {
  Name: string;
  Icon: string;
  Action: Function
}

父组件：

@Component({
...
})
export class ParentComponent implements OnInit {
  buttons: IButton[] = [
    {
      Name: 'Hello',
      Icon: 'Test',
      Action: this.actionOne.bind(this) // we need to make sure this is scoped correctly
    }
  ];

  actionOne(){
    console.log('This is from action One');
  }

  constructor() { }

  ngOnInit() {

  }
}

子组件

@Component({
...
})
export class ChildComponent implements OnInit {
  @Input() buttons: IButton[];

  constructor() { }

  ngOnInit() {

  }
}

子 html

<div *ngIf="buttons">
  <button *ngFor="let button of buttons" (click)="button.Action()">{{button.Name}}</button>
</div>

希望有帮助

【讨论】：

如何处理 button.Action 获取多个参数如 actionOne(para1, para2) 的场景？

【解决方案2】：

您的代码无法工作，因为您将字符串文字而不是方法引用传递给孩子。例如，在button.action 属性中，您的ChildComponent 看到的是字符串文字"actionOne()"，而不是方法actionOne()。

为了在声明按钮时传递方法引用，您必须删除方法名称周围的引号和括号，并在它们前面加上this.：

buttons = [
    { 'name': 'Name1', 'icon': 'Icon1', 'action': this.actionOne },
    { 'name': 'Name2', 'icon': 'Icon2', 'action': this.actionTwo },
    { 'name': 'Name3', 'icon': 'Icon3', 'action': this.actionThree }
]

但是，它仍然不起作用，因为 this 的上下文将在 ChildComponent 中丢失。

我要做的是在按钮声明中使用字符串文字（类似于您的代码，但没有括号，例如'actionOne'、'actionTwo'...）并且每当在子项中单击按钮时，我都会向父级发送@Output 事件：

@Component({
  template: `
    <button (click)="buttonClicked.emit(button.action)">
      {{ button.name }}
    </button>
  `
})
export class ChildComponent  {
  @Output() buttonClicked: EventEmitter<string> = new EventEmitter<string>();
}

请注意，我在发出事件时传递了 button.action 属性（字符串）。

现在，ParentComponent 可以监听该事件并使用接收到的字符串作为标识符来决定调用哪个本地方法：

@Component({
  template: `
    <child-comp (buttonClicked)="handleAction($event)"></child-comp>
  `
})
export class ParentComponent  {

  handleAction(actionName) {
    // Here, put some logic to call a local method based on `actionName`
    // Something like this[actionName]();
  }

  actionOne() {
      ...
  }

  actionTwo() {
      ...
  }

}

【讨论】：