如何从另一个DOM元素

Question

嗨控制一个DOM元素的造型我有一个角材料提示执行。所以，当我将鼠标悬停我的跨度，我可以看到工具提示。我怎样才能有条件地更改提示的背景（例如：错误显示红色的背景，成功展示绿色背景等）

组件：

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/和>>>，但仍然）。

Answer 2

我想你可以使用角度指令ngClass这样：

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