Question

我在其他组件（父级）的页面html中有一个组件（子），如：

Decimal

在子组件中有一个输入：

<div>
   <child-component (focusEmit)="startAnimation()"></child-component>
</div>

focusFunction（）向父节点发出一个事件。

我不想以这种方式解决这个用例。我希望子组件是干净的（因为我有其他嵌套组件，这个用例是简化的，我不希望长链输出发射）。

还有另一种方法是父项将事件焦点捕获到其子组件中包含的输入中？

Answer 1

您可以使用主题（rxJs）http://reactivex.io/rxjs/manual/overview.html#subject 这是EventEmitter的替代品。

通过@Output eventEmitter可以这样做

子组件

@Output() focusEmit = new EventEmitter<any>();

focusFunction() {
   this.focusEmit.emit(true);
}

父组件

HTML

 <child-component (focusEmit)="startAnimation(event)"></child-component>

component.ts

startAnimation($event) {
    // Handle your code
}

使用ViewChild模式

父组件

<child-component  #childAttr></child-component>

@ViewChild("childAttr") childAttr;
childAttrId : string;

startAnimation() {
    this.childAttrId  = childAttr.id;
}

但您的孩子成分保持不变

focusFunction() {
   this.id = "focus triggered";
}

父组件侦听重点关注子组件中包含的输入

1 个答案: