從父組件到子組件Angular2 / 4觸發懸停樣式

Question

我正在創建一個數據樹，其中子組件只是父組件的新實例。 當我將鼠標懸停在父文件夾中的文件夾名稱上時，將顯示編輯和刪除按鈕。 當文件夾展開以顯示子組件時，我希望具有相同的行為，但是懸停無法正常工作。 我試圖禁用視圖封裝以及css文件中的/ deep /方法，但是我都無法工作。 我也嘗試過綁定一個CSS類，然后將其傳遞給新實例，但這又沒有用。

library-tree.html（庫的父級）

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

library.html（“庫樹”的子級）

<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>

圖書館

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() {}

 }

庫.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;
}

任何想法都會有所幫助，謝謝！

Answer 1

您是否看到了Angular 4.3現在可用

已不再支持模擬的/ deep / CSS選擇器（即“影子穿透”后代組合器，也稱為>>>），以匹配瀏覽器實現和Chrome的刪除意圖。 添加了:: ng-deep為當前正在使用此功能的開發人員提供臨時解決方法。

具有諷刺意味的是，我今天第一次在Angular視頻中看到了/ deep / 。 所以這在我心中非常新鮮。 我GOOGLE了它和鏈接的視頻的作者這個和這個詢問是否仍然工作。
他讓我知道了發行說明。

似乎:: ng-deep即將出路