如何从另一个 DOM 元素控制一个 DOM 元素的样式答案

【问题标题】：How to control styling of one DOM element from another DOM Element如何从另一个 DOM 元素控制一个 DOM 元素的样式
【发布时间】：2017-10-09 07:41:26
【问题描述】：

您好，我有一个 Angular Material 工具提示实现。因此，当我将跨度悬停时，我可以看到工具提示。如何有条件地更改工具提示的背景（例如：错误显示红色背景，成功显示绿色背景等）

组件：

import {
    Component,
    Input,
    HostBinding,
    OnInit,
    ViewEncapsulation,
    ElementRef,
    AfterViewInit
} from '@angular/core';

@Component({
    selector: 'dbs-tooltip',
    templateUrl: './tooltip.component.html',
    styleUrls: ['./tooltip.component.scss'],
})
export class TooltipComponent implements AfterViewInit{
    @Input() content: any;
    @Input() position: any;
    @Input() type: string;

    constructor(private elRef:ElementRef) {}

    ngAfterViewInit() {
        this.elRef.nativeElement.querySelector('.mat-tooltip');
      }

    getToolTipClass() {
        if (this.type === 'error') {
            return 'error-class';
        } else if (this.type === 'success') {
            return 'success-class';
        }
    }
}

HTML：

<span mdTooltip={{content}} mdTooltipPosition={{position}}>
    <ng-content></ng-content>
</span>

CSS：

// md-tooltip-component {
//     div {
//       background: red;      
//     }
//   }


.success-class {
    md-tooltip-component {
        div {
          background: green;      
        }
      }

}

有什么想法吗？提前感谢您的帮助。

【问题讨论】：

标签： javascript html css angular angular-material2

【解决方案1】：

您需要使用特殊的选择器来设置组件的样式。了解更多here。阅读有关::ng-deep 的更多信息。不幸的是，::ng-deep 将被弃用（晚于/deep/ 和>>>，但仍然如此）。

【讨论】：

【解决方案2】：

我认为您可以通过这种方式使用角度指令ngClass：

<some-element [ngClass]="(your condition)? class-success : class-error">...</some-element>

【讨论】：

OP 正在寻找一种方法来自定义工具提示而不是元素。