Angular2：如何綁定鼠標懸停事件以動態創建html字符串； 另外，如何獲取那些元素？

Question

這是場景：

在子組件中，我有條件地添加了一些html內容作為字符串。 我想為這些元素綁定懸停事件，並在鼠標懸停時進入父組件func。

ChildComponent{

...
someFunc(){
....
htmlDynamicContent = `<div (mouseover)="changeStyle($event)" 
(mouseout)="changeStyle($event)”>Test</div>`
...
return htmlDynamicContent;
}
}

ParentComponent{

changeStyle (event){
//Change element styles
}

}

非常感謝您的幫助。 提前致謝。

Answer 1

將事件發射器添加到子組件：

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

懸停時發出：

<div (mouseover)="onChangeStyle.emit($event)" 
(mouseout)="onChangeStyle.emit($event)”>Test</div>

然后綁定到父級中的EventEmitter：

<child (onChangeStyle)="changeStyle($event)"><child>