Javascript 禁用角度组件

我们在角度应用中使用。更具体地说，我们正在使用。但是，我们不希望在手机上显示工具提示，因此我们正在寻找一种方法，一旦屏幕大小低于某个阈值，就可以全局禁用工具提示指令

虽然可以通过禁用单个工具提示指令，但我们正在寻找一种通过单个开关禁用所有工具提示的方法。实现这一目标的最佳方式是什么

---

非常感谢

我没有找到完全禁用工具提示的方法。但是通过在css中使用全局样式，您可以在不使用JS的情况下解决这个问题

@media (max-width: 1280px) {
    bs-tooltip-container {
        display: none !important;
    }
}

如果屏幕大小低于1280px，则工具提示将不显示

---

祝你好运

这里是一个通用解决方案，使用角度指令

切换ToolTipDirective

，设置tooltip

isDisabled

属性。此指令使用

TooltipDirective

自动针对每个元素

通过使用

'[tooltip]：not（[toggleTooltip]），[toggleTooltip]'

选择器声明该指令，该指令将自动添加到正确的元素中

使用此解决方案，可以使用ngx引导提供的API禁用工具提示。此外，可通过如下所示的服务轻松控制切换

import { Directive, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';
import { TooltipDirective } from 'ngx-bootstrap/tooltip';
import { TooltipControlService } from './tooltip-control.service';

@Directive({
  selector: '[tooltip]:not([toggleTooltip]),[toggleTooltip]'
})
export class ToggleTooltipDirective implements OnDestroy {
  private subscription: Subscription;

  constructor(
    private tooltip: TooltipDirective,
    private tooltipControlService: TooltipControlService) {
      this.subscription = this.tooltipControlService.disabled$.subscribe(
        disabled => this.tooltip.isDisabled = disabled
      );
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

这里有一个服务，您可以在任何地方启用/禁用。该服务还使用

@angular/cdk

中的

LayoutModule

来检测屏幕尺寸何时改变并进行切换

import { Injectable } from '@angular/core';
import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { BehaviorSubject, Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class TooltipControlService {
  private disabledSubject = new BehaviorSubject(false);

  disabled$: Observable<boolean> = this.disabledSubject.asObservable();

  constructor(public breakpointObserver: BreakpointObserver) {
    this.breakpointObserver
      .observe(['(max-width: 1280px)'])
      .subscribe((state: BreakpointState) => {
        if (state.matches) {
          this.disable();
          console.log('Small viewport');
        } else {
          this.enable();
          console.log('Big viewport');
        }
      });
  }

  enable(): void {
    this.disabledSubject.next(false);
  }

  disable(): void {
    this.disabledSubject.next(true);
  }
}

---

希望这有帮助。

我将使用

@HostListner

来确定变量是真是假，然后使用var来启用或禁用工具提示。或者您可以通过css覆盖style@fynn，我添加了一个带有stackblitz示例的完整解决方案，该示例使用指令和服务使用tooltip Enabled属性全局禁用所有工具提示。我希望它能帮助你。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { LayoutModule } from '@angular/cdk/layout';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { ToggleTooltipDirective } from './toggle-tooltip.directive';

@NgModule({
  imports:      [ BrowserModule, FormsModule, LayoutModule, TooltipModule.forRoot() ],
  declarations: [ AppComponent, HelloComponent, ToggleTooltipDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }