Question

道歉所有我真诚地不知道如何表达这个问题，而且我理解它并不多。

背景信息： 我已经递归地嵌套了'容器'组件，这些组件将动态填充组件，用于我正忙着的WYSIWYG HTML编辑器项目。

我需要能够设置一个正在不同地悬停的容器（边框等），但是由于HTML / CSS的工作方式似乎存在限制，所以将鼠标悬停在子元素上会导致父元素本身存在处于悬停状态。

此后我一直在努力寻找程序化解决方案。

目标：我试图让嵌套的容器组件向其父级发出一个布尔值true，表示它们被悬停，以便父级将名为hovered的属性设置为false（我的样式是基于此值）。这意味着我的组件既是发射器又是监听器，我认为这样可行。它没有......

ISSUE：发出事件的元素似乎捕获了同一事件，因为将鼠标悬停在单个容器组件上会触发onChildHovered（）函数。我可能只是误解了这个孩子的父母沟通应该如何运作。

代码：

示例元素布局：

    <app-element-container [orientation]="false" type="parent">
        <app-element-container class="row" type="row" >
            <!--etc-->
        </app-element-container>
    </app-element-container>

component.ts

import {Component, EventEmitter, HostListener, Input, OnInit, Output} from '@angular/core';

@Component({
  selector: 'app-element-container',
  templateUrl: './element-container.component.html',
  styleUrls: ['./element-container.component.scss']
})
export class ElementContainerComponent implements OnInit {

  @Input() orientation = true;
  @Input() type = '';

  mouseOver = false;

  @Output() hoverEvent = new EventEmitter();

  constructor() {}

  ngOnInit() {}

  @HostListener('mouseenter')
  onMouseEnter() {
    this.mouseOver = true;
    this.hoverEvent.emit(true);
  }

  @HostListener('mouseleave')
  onMouseLeave() {
    this.mouseOver = false;
  }

  @HostListener('hoverEvent', ['$event'])
  onChildHovered($event) {
    this.mouseOver = $event;
    console.log(this.mouseOver);
  }
}

component.html

<div class="element"
     [ngClass]="{'parent': type === 'parent', 'row': type === 'row', 'hover': mouseOver}">
  <div class="element-hover-fix">
    <div class="controls">
      <div class="flag">
        <span>{{type}}</span>
      </div>
      <div class="toolbox">
        <div class="button"><md-icon>open_with</md-icon></div>
        <div class="button"><md-icon>content_copy</md-icon></div>
        <div class="button"><md-icon>delete</md-icon></div>
      </div>
      <div class="add-children" [ngClass]="{vertical: !orientation}">
        <div class="add-child">
          <md-icon>chevron_left</md-icon>
        </div>
        <div class="add-child" (click)="orientation = !orientation">
          <md-icon>screen_rotation</md-icon>
        </div>
        <div class="add-child">
          <md-icon>chevron_right</md-icon>
        </div>
      </div>
    </div>
  </div>
  <ng-content></ng-content>
</div>

Answer 1

根据您的示例元素布局，子项不会向父项发送。为此，您需要更新布局，如下所示：

<router-link to="/foo" active-class="active">foo</router-link>

<router-link to="/bar" exact-active-class="exact-active">bar</router-link>

然后，当孩子遇到鼠标悬停事件时，你需要声明onChildHoverEvent做某事。

递归嵌套组件向其父组件发送事件，该父组件是同一组件的实例

1 个答案: