Отключить угловой компонент

Question

мы используем ngx-bootstrap в нашем приложении Angular.В частности, мы используем директиву tooltip .Однако мы не хотим отображать всплывающие подсказки на мобильном устройстве, поэтому мы ищем способ глобально отключить директиву всплывающей подсказки, когда размер экрана падает ниже определенного порога.

Хотя есть способ отключить одну подсказкуДиректива через атрибут с включенной подсказкой , мы ищем способ отключить все всплывающие подсказки с помощью одного переключателя.Как лучше всего достичь этой цели?

Большое спасибо

Answer 1

Вот общее решение с использованием угловой директивы ToggleTooltipDirective, которая устанавливает атрибут всплывающей подсказки isDisabled. Эта директива автоматически предназначается для каждого элемента с TooltipDirective.

Директива автоматически добавляется к нужным элементам под углом, объявляя ее с помощью селектора '[tooltip]:not([toggleTooltip]),[toggleTooltip]'.

Вот рабочая демонстрация StackBlitz

При использовании этого решения всплывающая подсказка отключается с помощью API, предоставляемого ngx-bootstrap. Кроме того, переключением можно легко управлять с помощью службы, как показано ниже.

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();
  }
}

А вот услуга, которую вы можете включить / отключить из любой точки мира. Служба также использует LayoutModule из @angular/cdk для определения изменения размеров экрана и переключения.

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

Надеюсь, это поможет.

Answer 2

Я не нашел способа полностью отключить подсказки.Но используя глобальный стиль в вашем CSS, вы можете решить эту проблему без JS.

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

Это приведет к тому, что всплывающие подсказки не будут отображаться, если размер экрана меньше 1280 пикселей.

Удачи!