PROSAGA码农传奇-通讯技术-父组件侦听重点关注子组件中包含的输入

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

作者: 满目山河
发布时间: 2025-01-26 04:36:34 (1月前)
转自：

<div class =“post-text”itemprop =“text”>
  
    你可以使用Subject（rxJs）
    <a href="http://reactivex.io/rxjs/manual/overview.html#subject" rel="nofollow noreferrer">
      http://reactivex.io/rxjs/manual/overview.html#subject
    </A>
    
这是EventEmitter的替代品。
  
  <HR />
  
    通过@Output eventEmitter，可以这样做
  
  
    子组件
  
   <pre>
 <code>
 @Output() focusEmit = new EventEmitter<any>();

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

</code>
 </pre>
  
    父组件
  
  
    HTML
  
   <pre>
 <code>
 <child-component (focusEmit)="startAnimation(event)"></child-component>

</code>
 </pre>
  
    component.ts
  
   <pre>
 <code>
 startAnimation($event) {
 // Handle your code
}

</code>
 </pre>
  <HR />
  
    的
      使用ViewChild模式
    </强>
  
  
    父组件
  
   <pre>
 <code>
 <child-component #childAttr></child-component>

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

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

</code>
 </pre>
  
    但您的孩子组件保持不变
  
   <pre>
 <code>
 focusFunction() {
 this.id = "focus triggered";
}

</code>
 </pre>
</DIV>