触发从父到子组件的悬停样式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

回答

相关问题