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

我正在創建一個數據樹，其中子組件只是父級的新實例。當我將鼠標懸停在父級文件夾名稱上時，我會顯示編輯和刪除按鈕。當我的文件夾展開以顯示子組件時，我想要這種相同的行爲，但懸停不起作用。我曾嘗試禁用視圖封裝和CSS /文件中的/深/方法，但我無法得到任何工作。我也嘗試綁定一個css類，然後將它傳遞給新的實例，但再次沒有奏效。觸發從父到子組件的懸停樣式Angular2/4

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

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

任何想法將是有益的，謝謝！

來源

2017-07-19 Austin

我想通了，我錯過了我的嵌套庫組件的布爾屬性，這是防止從顯示的按鈕。 – Austin

你見過的模擬/深/ CSS選擇器Angular 4.3 Now Available

支持（暗影刺穿後裔組合子又名>>>）已被棄用，以匹配瀏覽器實現和Chrome的意圖刪除。 :: ng-deep已被添加，爲當前使用此功能的開發人員提供臨時解決方法。

具有諷刺意味的是，我首次在一個Angular視頻中看到了/deep/。因此，它在我心中是非常新鮮的。我谷歌搜索並鏈接了視頻this和this的作者，詢問它是否仍然有效。
他讓我意識到發行說明的..

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

來源

2017-07-19 17:20:11 JGFMK

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

回答

相關問題