Question

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

组件：

HTML：

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';
        }
    }
}

CSS：

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

任何想法家伙？在此先感谢您的帮助。

Answer 1

您需要使用特殊选择器来设置组件的样式。了解详情here。详细了解::ng-deep。不幸的是，::ng-deep将被弃用（晚于/deep/和>>>，但仍然）。

Answer 2

我认为您可以这样使用角度指令ngClass：

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

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

2 个答案: