如何从另一个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

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

Answer 2

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

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