如何從另一個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>