Hover-Stil von übergeordneter zu untergeordneter Komponente auslösen Angular2/4

Question

Ich erstelle eine Datenstruktur, in der die untergeordneten Komponenten nur neue Instanzen des übergeordneten Elements sind. Wenn ich den Mauszeiger über den Ordnernamen im Elternbereich bewege, zeige ich Schaltflächen zum Bearbeiten und Löschen an. Ich möchte das gleiche Verhalten, wenn mein Ordner erweitert wird, um die untergeordneten Komponenten anzuzeigen, aber der Hover funktioniert nicht. Ich habe versucht, die View-Kapselung und auch die/deep/-Ansatz in der CSS-Datei zu deaktivieren, aber ich konnte nicht zur Arbeit kommen. Ich habe auch versucht, eine CSS-Klasse zu binden und dann an die neue Instanz zu übergeben, aber auch das hat nicht funktioniert.

Bibliothek-tree.html (Eltern-Bibliothek)

<div id="scrollbar-style"> 
    <div *ngFor="let media of libraries"> 
     <library 
       [media]="media"> 
     </library>   
    </div>  
</div> 

library.html (Kind der Bibliothek Baum)

<h4 class="category-name>{{media.name}}</h4> //hover here 

<div class="edit-delete-btns"> //buttons that show on hover at the top level, but not in child Library components 
    <button name="media.id" (click)="onCategoryNameEdit()"></button> 
    <button name="media.id" (click)="onCategoryDelete(media.id)"></button> 
</div> 

<div *ngIf="libraryVisible"> 
    <ul *ngIf="media.category"> 
     <li *ngFor="let category of media.category"> 
      <library [media]="category" [ngClass]="libraryCompClass" [libraryCompClass]="libraryComp"></library> 
     </li> 
    </ul> 
</div> 

Library.ts

import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core'; 
import { Media } from '../../../shared/models/media'; 

export class LibraryComponent implements OnInit { 

    @Input() libraryCompClass: string; 
    @Input() media: Media; 

    constructor() {} 

} 

library.scss

.edit-delete-btns { 
    display: none; 
    z-index: 102; 
} 

.category-name:hover ~ .edit-delete-btns { 
    display: inline-block; //this works in the top level to show the buttons 
} 

/deep/ div > ul > li > .libraryCompClass > .library > .category-name:hover ~ .edit-delete-btns { 
    display: inline-block; //my attempt at chaining classes to reach the deeper elements in the child component 
} 

.category-name { 
    z-index: 101; 
} 

.edit-delete-btns:hover { 
    display: inline-block; 
} 

Irgendwelche Ideen wäre hilfreich, danke!

Answer 1

Haben Sie Angular 4.3 Now Available

Unterstützung für den emulierten/deep/CSS-Selektor (der Schatten-Piercing Nachkomme combinator aka >>>) Implementierungen und Chrome-Browser Absicht entsprechen wurde zu entfernen gesehen veraltet. :: ng-deep wurde hinzugefügt, um eine temporäre Problemumgehung für Entwickler zur Verfügung zu stellen, die derzeit diese Funktion verwenden.

Ironischer sah ich /deep/ in einem Winkel Video heute zum ersten Mal. So war es sehr frisch in meinen Gedanken. Ich googelte es und verlinkte den Autor des Videos this und this fragt, ob es noch funktioniert.
Er hat mich von den Release Notes bewusst ..

Seems even ::ng-deep is on the way out