Angular 2 - Emit鼠标将事件输入到其他组件

Question

我有一个带按钮的组件，on（mouseenter）事件我想触发已在其他组件中创建的功能

悬停按钮

<button (mouseenter)="mouseEvent()">Valid</button>

函数mouseEvent（）应调用另一个组件中的另一个函数 它看起来很简单但很棘手

export class HomeComponent implements OnInit {

constructor() { }

  ngOnInit() {
  }

  mouseEvent() {

  }
}

在其他组件中我有一个功能

 execute() {
   console.log('to be executed');
 }

我想在触发mouseenter事件时执行它

Answer 1

您应该修改为

你的HTML中的

<button (mouseenter)="mouseEvent($event)">Valid</button>

你组件中的

  mouseEvent (event) {
        //do what ever you like with your event
        console.log(event)
      }

如果你想从这个组件向子节点发送数据，你应该在父节点中声明变量并设置它

    let myEvent:any;   

    mouseEvent (event) {
                this.myEvent = event;
              }

你的HTML中的

<childcomponent [event]="myEvent">

并且不要忘记在子组件中声明输入

export class ChildComponent {
     @Input()event:any;
}