Angular如何实现主题而不是输入和模板变量

Question

编辑： 我实现了一些逻辑来隐藏我的图标，以及仅在鼠标上的特定行中的特定行时才如何。我需要将此逻辑调整为我的项目。不幸的是，在我的项目中，改变全球风格是不可接受的:( 我试图用主题实现它，但是现在，所有行都张开并显示了所有图标，而不是当前行。是否可以使用这些主题操作员逻辑并仅在库尔特式悬停行上显示图标？ 现在，这是我的父组件html：

<ng-container *ngIf="!emptyList else emptyListTemplate">
                            <tr requestRow *ngFor="let request of requests"
                                (mouseenter)="emitEventToChild(true)"
                                (mouseleave)="emitEventToChild(false)"
                                [isRequestRowHighlighted]="eventsSubject.asObservable()"
                                [attr.data-cy-request-id]="request.id"
                                [request]="request"
                                [actionable]="true"
                                [isRequest]="isRequestsList"
                                (delete)="deleteRequest($event)"
                                appMemoTooltip>
                            </tr>
                        </ng-container>

这是TS部分：

isMouseEnter: boolean
eventsSubject: Subject<boolean> = new Subject<boolean>();

emitEventToChild(e: boolean) {
    this.eventsSubject.next(e)
}

private filterSubscription: Subscription

这是我的孩子组件html（其选择器是'tr [requestRow]'）

<td *ngIf="actionable" class="p-auto text-center actions" (mouseenter)="memoControls.pause()" (mouseleave)="memoControls.resume()">
<div class="d-flex align-items-center justify-content-end" [ngClass]="{'invisible': !isMouseEnter}">
    <button
        *ngIf="preferredEditType"
        type="button" class="btn btn-primary bg-transparent border-0"
        title="Edit"
        data-cy-id="cy-btn-edit"
        (click)="load($event, request, isRequest, preferredEditType)">
        <i class="icon-edit-request"></i>
    </button>
    <button *ngIf="hateoas.supports(request, 'details')"
            type="button" class="btn btn-success bg-transparent border-0"
            title="Reuse"
            data-cy-id="cy-btn-reuse"
            (click)="load($event, request, isRequest, requestOperationType.REUSE)">
        <i class="icon-copy"></i>
    </button>
    <button *ngIf="hateoas.supports(request, 'delete')"
            type="button" class="btn btn-danger bg-transparent border-0"
            title="Delete"
            data-cy-id="cy-btn-delete"
            (click)="deleteRequest($event)">
        <i class="icon-trash"></i>
    </button>
</div>

这是ts文件：

@Input() isRequestRowHighlighted: Observable<boolean>
isMouseEnter: boolean
ngOnInit(): void {
    this.eventsSubscription = this.isRequestRowHighlighted.subscribe(value => this.isMouseEnter = value)}
enter code here
ngOnDestroy(): void {
    this.eventsSubscription.unsubscribe();
}

预期结果

现在a>

请，让我知道如何仅适用于当前（鼠标）行的图标，而不是所有这些行。 谢谢。

Answer 1

.css到Mannage两个差异组件应该是全局的，因此请尝试 styles.css

tr[requestRow] button {
  visibility: hidden;
}
tr[requestRow]:hover button{
  visibility: visible;
}

一个简单的

” >更新

好吧，我们可以使用 viewEncapsulation.none .css在我们的组件中以全局方式进行。

@Component({
  selector: [requestRow]
  ...
  encapsulation:ViewEncapsulation.None,
})

但是要小心，如果在我们的组件中我们也使用，例如h1 {color：red}此样式也会以

另一种方式传播到我们所有的aplication（但标记为标记）由于弃用）正在使用某些类似（在parent.css中）

:host ::ng-deep tr[hello]  button {
  visibility:hidden
}
:host ::ng-deep tr[hello]:hover button{
  visibility:visible
}