您好,我有一个 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;
}
}
}
任何想法伙计们?预先感谢您的帮助。
最佳答案
您需要使用特殊的选择器来设置组件的样式。了解更多 here .阅读有关 ::ng-deep
的更多信息。不幸的是,::ng-deep
将被弃用(晚于 /deep/
和 >>>
,但仍然如此)。
关于javascript - 如何从另一个 DOM 元素控制一个 DOM 元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46641118/