Обучение Angular с использованием всплывающей подсказки в качестве примера для понимания пользовательских инструкций.

В предыдущих статьях мы дали обзор Angular . Что касается пользовательских инструкций, то мы смогли их написать, но в реальных сценариях нам все равно необходимо стандартизированное управление.

Angular — это обновленная версия Angular.js. [Рекомендуемые связанные учебные пособия: «Учебное пособие по Angular»]

Итак, в этой статье мы будем использовать Tooltip для объяснения содержания пользовательских инструкций.

Онлайн-рендеринг, а именно:

Структура каталогов

основана на проекте кода, реализованном в предыдущей статье. Выполните командную строку:

# Войдите в папку директив $ cd Directives.

#Создать папку подсказок$ mkdir подсказка

# Введите папку всплывающей подсказки $ cd Tooltip

# Создать компонент всплывающей подсказки $ ng создать всплывающую подсказку компонента

# Создать директиву всплывающей подсказки $ ng создать всплывающую подсказку директивы

После выполнения приведенной выше командной строки вы получите следующую структуру каталогов файлов app/directive/tooltip

:
├── всплывающая подсказка // компонент всплывающей подсказки │ ├── user-list.comComponent.html // скелет страницы │ ├── user-list.comComponent.scss // уникальный стиль страницы │ ├── спецификация user-list.comComponent. .ts // Тестовый файл │ └── user-list.comComponent.ts // Файл javascript ├── Tooltip.directive.spec.ts // Тестовый файл └── Tooltip.directive.ts // Файл директив

Ну, вот Компонент я разместил на одном уровне с tooltip , в основном для облегчения управления. Конечно, это варьируется от человека к человеку, вы можете поместить его в папку общедоступных components .

Напишите компонент всплывающей подсказки

в html файле:

<div class="caret"></div>
<div class="tooltip-content">{{data.content}}</div>

В файле стиля .scss есть:

$black: #000000;
$white: #ffffff;
$caret-size: 6 пикселей;
$tooltip-bg: прозрачность($черный, 0.25); // прозрачность — это синтаксис sass $grid-gutter-width: 30px;
$body-bg-color: $white;
$app-anim-time: 200 мс;
$app-anim-curve: легкость;
$std-border-radius: 5px;
$zindex-макс: 100;

// :host селектор псевдокласса, устанавливает стиль самого элемента компонента: хост {
  положение: фиксированное;
  дополнение: $grid-gutter-width/3 $grid-gutter-width/2;
  цвет фона: $tooltip-bg;
  цвет: $body-bg-color;
  непрозрачность: 0;
  переход: все $app-anim-time $app-anim-curve;
  выравнивание текста: по центру;
  граница-радиус: $ std-border-radius;
  z-индекс: $zindex-max;
}

.caret { // ширина каретки: 0;
  высота: 0;
  левая граница: 6 пикселей, сплошная прозрачная;
  правая граница: 6 пикселей, сплошная прозрачная;
  нижняя граница: сплошная 6 пикселей $tooltip-bg;
  позиция: абсолютная;
  верх: -$caret-size;
  осталось: 50%;
  поле слева: -$caret-size/2;
  цвет нижней границы: $tooltip-bg;
}

Хм~, css — волшебная вещь, и я подготовлю статью, чтобы объяснить контент, связанный с sass ...

Тогда содержимое javascript tooltip.component.ts будет следующим:

import { 
  Компонент, 
  ElementRef, //Элемент указывает на HostBinding, 
  OnDestroy, 
  OnInit 
} из '@angular/core';

@Компонент({
  selector: 'app-tooltip', // Идентификатор, указывающий, как называется мой компонент, вот app-tooltip
  templateUrl: './tooltip.comComponent.html', // Скелет этого компонента styleUrls: ['./tooltip.comComponent.scss'] // Частный стиль этого компонента})
класс экспорта TooltipComponent реализует OnInit {

  public data: Any; // Присвойте значение директиве Private displayTimeOut: Any;

  // Декоратор, связанный с привязкой хоста самого компонента @HostBinding('style.top') hostStyleTop!: string;
  @HostBinding('style.left') hostStyleLeft!: string;
  @HostBinding('style.opacity') hostStyleOpacity!: string;

  конструктор(
    частный элементRef: ElementRef
  ) { }

  ngOnInit(): пустота {
    this.hostStyleTop = this.data.elementPosition.bottom + 'px';

    если (this.displayTimeOut) {
      ClearTimeout(this.displayTimeOut)
    }

    this.displayTimeOut = setTimeout((_: любой) => {
      // Здесь вычисляем расстояние между всплывающей подсказкой и левой стороной. Формула расчета здесь: Tooltip.left + .width целевого элемента - (tooltip.width/2).
      this.hostStyleLeft = this.data.elementPosition.left + this.data.element.clientWidth/2 - this.elementRef.nativeElement.clientWidth/2 + 'px'
      this.hostStyleOpacity = '1';
      this.hostStyleTop = this.data.elementPosition.bottom + 10 + 'px'
    }, 500)
  }
  
  
  // Компонент уничтожен ngOnDestroy() {
    // После уничтожения компонента очищаем таймер, чтобы предотвратить утечку памяти if(this.displayTimeOut) {
      ClearTimeout(this.displayTimeOut)
    }
  }
}

Написание инструкций для всплывающих подсказок

является основной темой этой статьи. Я отмечу конкретные инструкции в коде.

Содержимое соответствующего файла tooltip.directive.ts следующее:

import {. 
  ApplicationRef, // Обнаружение глобального вызова ComponentFactoryResolver, // Создание объекта компонента ComponentRef, // Ассоциация и руководство экземпляра компонента, указывающее на элемент, созданный директивой ComponentFactory, ElementRef, 
  EmbeddedViewRef, // EmbeddedViewRef наследует от ViewRef и используется для представления элементов пользовательского интерфейса, определенных в элементах шаблона.
  HostListener, // Прослушивание событий DOM, Инжектор, // Ввод зависимостей 
} из '@angular/core';

импортировать { TooltipComponent } из './tooltip/tooltip.comComponent';

@Директива({
  селектор: '[appTooltip]'
})
класс экспорта TooltipDirective {
  @Input("appTooltip") appTooltip!: string;

  частный компонентRef!: ComponentRef<TooltipComponent>;

  // Получаем относительное положение целевого элемента, например слева, справа, сверху, снизу
  получить элементPosition() {
    вернуть this.elementRef.nativeElement.getBoundingClientRect(); 
  }

  конструктор(
    защищенный elementRef: ElementRef,
    защищенное приложениеRef: ApplicationRef,
    защищенный компонентFactoryResolver: ComponentFactoryResolver,
    защищенный инжектор: Инжектор
  ) { }

  //Создаем подсказку
  защищенный createTooltip() {
    this.comComponentRef = this.comComponentFactoryResolver
      .resolveComponentFactory(TooltipComponent) // Привязка всплывающей подсказки компонент.create(this.injector);

    this.comComponentRef.instance.data = { // Привязка содержимого данных данных: this.appTooltip,
      элемент: this.elementRef.nativeElement,
      elementPosition: this.elementPosition
    }

    this.appRef.attachView(this.comComponentRef.hostView); //Добавляем представление const domElem = (this.comComponentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
    document.body.appendChild(domElem);
  }
  
  // Удалить подсказку
  защищенный уничтожитьTooltip() {
    если (this.comComponentRef) {
      this.appRef.detachView(this.comComponentRef.hostView // Удаляем представление this.comComponentRef.destroy();
    }
  }
  
  // Прослушиваем движение мыши в @HostListener('mouseover')
  ПриВвод() {
    this.createTooltip();
  }
    
  // Слушаем движение мыши out@HostListener('mouseout')
  OnOut() {
    this.destroyTooltip();
  }

}

На этом этапе 99% функций выполнены. Теперь мы можем вызывать их на странице.

На странице мы вызываем

нас, чтобы добавить в user-list.component.html следующий контент:

<p style="margin-top: 100px;">
  <!-- [appTooltip]="'Привет, Джимми'" — это ключевой момент-->
  <диапазон 
    [appTooltip]="'Привет, Джимми'" 
    style="margin-left: 200 пикселей; ширина: 160 пикселей; выравнивание текста: по центру; отступ: 20 пикселей 0; отображение: встроенный блок; граница: 1 пиксель сплошной #999;"
  >Джимми</span>
</p>

Мы объявили инструкцию TooltipDirective в app.module.ts и можем вызывать ее напрямую. Текущий эффект следующий:

Реализованная нами tooltip отображается внизу по центру, и это то, что мы обычно используем в фреймворке, например bottom атрибут всплывающей tooltip в angular ant design . По остальным атрибутам, если читателям интересно, их можно расширить.

На этом этапе мы вполне можем поддерживать написанные нами файлы инструкций.