禁用 Angular 组件

Question

我们正在使用 ngx-bootstrap in our Angular application. More specifically, we are using the tooltip directive。但是，我们不想在移动设备上显示工具提示，因此我们正在寻找一种方法来在屏幕尺寸低于特定阈值时全局禁用工具提示指令。

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

非常感谢

Answer 1

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

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

如果屏幕尺寸低于 1280 像素，这将使工具提示不显示。

祝你好运！

Answer 2

这是使用 angular 指令 ToggleTooltipDirective 设置工具提示 isDisabled 属性的通用解决方案。该指令自动将每个元素作为 TooltipDirective.

的目标

通过使用 '[tooltip]:not([toggleTooltip]),[toggleTooltip]' 选择器声明指令，angular 会自动将指令添加到适当的元素中。

Here is a working demo on StackBlitz

使用此解决方案，使用 ngx-bootstrap 提供的 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();
  }
}

这是一项服务，因此您可以从任何地方 enable/disable。该服务还使用 @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);
  }
}

您的应用模块：

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 { }

希望对您有所帮助。

禁用 Angular 组件

Disable Angular component

javascript

twitter-bootstrap

typescript

ngx-bootstrap

angular