0
子コンポーネントが親の新しいインスタンスにすぎないデータツリーを作成しています。親のフォルダ名の上にカーソルを置くと、編集と削除のボタンが表示されます。フォルダーが子コンポーネントを表示するように展開されているが、ホバーが機能しないときと同じ動作が必要です。私はビューのカプセル化を無効にしようとしている/ 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;
}
任意のアイデアが参考になる、ありがとう！
..リリースノートの私は認識して作られた私は、私は表示からボタンを防止して、私のネストされたライブラリコンポーネントのboolean属性が欠けていた、それを考え出しました。 – Austin