javascript - 如何从另一个 DOM 元素控制一个 DOM 元素的样式

Question

您好，我有一个 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;      
        }
      }

}

任何想法伙计们？预先感谢您的帮助。

Answer 1

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