Question

我正在尝试Introjs的演示模式功能，其中重点是有关部分。在我的Angular应用程序中，MainLayoutComponent由HeaderComponent，NavComponent和MainComponent组成。因此，MainComponent具有带有部分的DashboardComponent。在演示模式处于活动状态时，我想突出显示特定的部分。

MainLayoutComponent.ts

ngDoCheck(): void {
 if(this._tooltipService.demoMode){
  document.getElementsByClassName("main-layout")[0].style.opacity = "0.5";
 }
}

dashboard.component.html

 <macoco-button  [ngClass]="{'sth': _tooltipService.demoMode}"
              id="wiki1"
              [style]="{'width': 'auto',
              'height': '23px',
              'margin-top':'-5px',
              'margin-left':'8px',
              'margin-right':'8px',
              'min-width': '30%',
              'max-width': '100%',
              'padding-left' : '15px',
              'padding-right' : '15px'
              }"
              [label]="'?'"
        [mdePopoverTriggerFor] = "wiki1"
    (click)="navigateTowiki1HelpSite()"
    [classes] = "'blue-green-transition'">

dashboard.component.css

.sth{
  opacity:1 !important;
}

我了解到document.getElementByClassName不是标准，但仅用于概念验证，以后将用ElementRef替换。

我想在覆盖MainLayoutComponent设置的不透明度的部分中应用 .sth css类。

这是正确的方法还是有更好的方法？

Angular 6从子组件覆盖父组件css

0 个答案: