Question

我正在创建一个数据树，其中子组件只是父组件的新实例。当我将鼠标悬停在父级中的文件夹名称上时，我会显示编辑和删除按钮。当我的文件夹展开以显示子组件时，我想要相同的行为，但悬停不起作用。我已经尝试禁用视图封装以及css文件中的/ deep / approach，但我无法工作。我还尝试绑定一个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>

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

任何想法都会有所帮助，谢谢！

Answer 1

您见过Angular 4.3 Now Available

吗？

支持模拟/深度/ CSS选择器（暗影穿孔后代组合器又名＆gt;＆gt;＆gt;）已被弃用以匹配浏览器实现和Chrome的意图删除。 :: ng-deep 一直都是添加为当前使用的开发人员提供临时解决方法这个功能。

讽刺的是，我今天第一次在Angular视频中看到了 / deep / 。所以我心里很新鲜。我用Google搜索并链接了视频this和this的作者，询问它是否仍有效。
他让我知道发行说明..

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

触发悬停样式从父组件到子组件Angular2 / 4

1 个答案: