Angular 2指令--你怎么知道是哪个孩子调用了这个指令？

Angular 2是一种流行的前端开发框架，它引入了指令的概念来扩展HTML的功能。指令是一种特殊的HTML属性，用于给HTML元素添加行为和样式。

在Angular 2中，要确定是哪个孩子调用了指令，可以使用指令的输入属性和输出属性来实现。输入属性允许父组件向子组件传递数据，而输出属性则允许子组件向父组件发送事件。

首先，我们可以在指令中定义一个输入属性，用于接收父组件传递的数据。例如，我们可以定义一个名为"childId"的输入属性：

@Input() childId: number;

然后，在父组件中，我们可以通过绑定这个输入属性来传递数据给子组件：

<app-child [childId]="1"></app-child>

接下来，我们可以在指令中定义一个输出属性，用于发送事件给父组件。例如，我们可以定义一个名为"childClicked"的输出属性：

@Output() childClicked: EventEmitter<number> = new EventEmitter<number>();

然后，在子组件中，我们可以通过调用这个输出属性的emit方法来发送事件给父组件：

onClick() {
  this.childClicked.emit(this.childId);
}

最后，在父组件中，我们可以监听子组件的输出事件，并在事件处理程序中获取到调用指令的孩子的信息：

<app-child (childClicked)="onChildClicked($event)"></app-child>

onChildClicked(childId: number) {
  console.log("Child with ID " + childId + " called the directive.");
}

通过这种方式，我们可以确定是哪个孩子调用了指令，并在父组件中进行相应的处理。

对于Angular 2指令的更多信息和使用示例，您可以参考腾讯云的相关产品文档：

• Angular 2指令概述
• Angular 2指令开发指南
• 腾讯云前端开发服务
• 腾讯云云开发