同じコンポーネントのインスタンスである親にイベントを送信する再帰的にネストされたコンポーネント

Question

謝罪すべて私は質問をどのようにフレーズするか分かりませんでした。

CONTEXT： 私はと忙しいWYSIWYG HTMLエディタのプロジェクトのために動的にコンポーネントを移入しようとしている再帰的にネストされた「コンテナ」のコンポーネントを持っています。

私は異なって上書きされているコンテナをスタイルすることができる必要がありますが（境界線など）、HTML/CSSの動作に制限があるため、子要素にカーソルを合わせると親は本質的にホバリング状態にもなる。

私はそれ以来、プログラム的な解決策を見つけることを試みてきました。

ゴール：ネストされたコンテナコンポーネントが親にブール値を返すようにして、親がhoveredというプロパティをfalseに設定するようにしました（私のスタイリングはこの値に基づいています）。つまり、私のコンポーネントはエミッタとリスナの両方であり、これが機能すると思っていました。それは...

問題を放出する要素は、1つのコンテナコンポーネント上でのホバリングと同じイベントをキャッチしているようですが、onChildHovered（）関数を起動します。私はおそらく、この子の親のコミュニケーションがどのように働くことになっているのか誤解しています。

CODE：

例要素レイアウト：

<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

あなたの例要素のレイアウトによると、子供は親に放出されていません。 はそうするためには、あなたはそうのようなレイアウトを更新する必要があります。

<app-element-container [orientation]="false" type="parent"> 
    <app-element-container (hoverEvent)="onChildHoverEvent($event)" 
          class="row" 
          type="row" > 
      <!--etc--> 
    </app-element-container> 
</app-element-container> 

が次にあなたは子供がイベントの上にマウスを経験している時に何かをするonChildHoverEventを宣言する必要があります。