Работа с Angular

Библиотека tingle.js предоставляет простой и эффективный способ для создания модальных окон в веб-приложениях. Она представляет собой легковесное решение, которое позволяет легко интегрировать всплывающие окна в любой проект. Однако в случае использования tingle.js в контексте Angular существует ряд особенностей, которые необходимо учитывать для корректной работы и интеграции этой библиотеки в архитектуру приложения.

Установка tingle.js

Для начала необходимо установить библиотеку tingle.js. В случае использования Angular, обычно предпочтительно установить её через npm, чтобы упростить процесс работы с зависимостями.

npm install tingle.js --save

После установки можно подключить библиотеку в вашем компоненте Angular. Это можно сделать с помощью стандартного импорта:

import * as tingle from 'tingle.js';

Подключение стилей tingle.js

Для того чтобы модальные окна правильно отображались, необходимо также подключить стили библиотеки. Можно либо импортировать их напрямую в ваш styles.scss или styles.css, либо подключить через angular.json.

Для подключения через angular.json нужно указать путь к файлу стилей в разделе styles:

"styles": [
  "src/styles.css",
  "node_modules/tingle.js/dist/tingle.css"
]

Если требуется импортировать стили в styles.scss, используйте следующую строку:

@import '~tingle.js/dist/tingle.css';

Теперь библиотека tingle.js и её стили готовы к использованию в проекте.

Создание модального окна

В Angular важно следить за разделением ответственности компонентов. Для создания модального окна необходимо создать специальный компонент, который будет работать с tingle.js. Для этого сначала необходимо инстанцировать объект tingle.modal() и настроить параметры модального окна.

Пример компонента для модального окна:

import { Component, OnInit } from '@angular/core';
import * as tingle from 'tingle.js';

@Component({
  selector: 'app-modal',
  templateUrl: './modal.component.html',
  styleUrls: ['./modal.component.scss']
})
export class ModalComponent implements OnInit {
  modal: any;

  constructor() { }

  ngOnInit(): void {
    this.modal = new tingle.modal({
      footer: true,
      closeLabel: 'Закрыть',
      closeIcon: true,
      stickyFooter: false,
    });

    this.modal.setContent('<h1>Модальное окно</h1><p>Это пример работы с tingle.js в Angular</p>');
  }

  openModal(): void {
    this.modal.open();
  }

  closeModal(): void {
    this.modal.close();
  }
}

В данном примере создается компонент ModalComponent, который содержит модальное окно. Мы создаем новый объект tingle.modal() с конфигурацией и добавляем контент с помощью метода setContent(). Для открытия и закрытия модального окна создаются методы openModal() и closeModal().

Взаимодействие с Angular Template

Для управления модальным окном из шаблона Angular необходимо создать соответствующие кнопки или другие элементы интерфейса, которые будут вызывать методы открытия и закрытия окна.

<!-- modal.component.html -->
<button (click)="openModal()">Открыть модальное окно</button>
<button (click)="closeModal()">Закрыть модальное окно</button>

Здесь мы используем Angular событие (click), чтобы вызвать методы компонента, которые открывают и закрывают модальное окно.

Управление состоянием модального окна

Одной из особенностей работы с tingle.js в Angular является необходимость контроля состояния модального окна через переменные и методы компонента. Например, можно использовать флаг для определения, открыто ли окно или нет, и скрывать элементы интерфейса в зависимости от состояния.

export class ModalComponent implements OnInit {
  modal: any;
  isModalOpen: boolean = false;

  ngOnInit(): void {
    this.modal = new tingle.modal({
      footer: true,
      closeLabel: 'Закрыть',
      closeIcon: true,
      stickyFooter: false,
    });

    this.modal.setContent('<h1>Модальное окно</h1><p>Пример управления состоянием модального окна</p>');
    
    this.modal.on('close', () => {
      this.isModalOpen = false;
    });

    this.modal.on('open', () => {
      this.isModalOpen = true;
    });
  }

  openModal(): void {
    this.modal.open();
  }

  closeModal(): void {
    this.modal.close();
  }
}

В этом примере мы добавили флаг isModalOpen, который отслеживает состояние модального окна. С помощью событий open и close мы изменяем его значение, что может быть полезно для создания логики отображения других элементов на странице в зависимости от того, открыто ли модальное окно.

Обработка событий модального окна

Библиотека tingle.js предоставляет несколько событий, которые можно использовать для обработки различных сценариев взаимодействия с модальными окнами. Например, можно прослушивать события open, close, beforeClose и другие, чтобы выполнить дополнительные действия в ответ на изменение состояния окна.

Пример использования события beforeClose, чтобы выполнить дополнительные действия перед закрытием окна:

this.modal.on('beforeClose', () => {
  console.log('Модальное окно будет закрыто');
});

Встраивание модальных окон в другие компоненты

Одной из возможностей Angular является возможность создания переиспользуемых компонентов, что упрощает встраивание модальных окон в другие части приложения. Для этого можно создать сервис, который будет управлять созданием и открытием модальных окон, а затем использовать его в других компонентах.

Создание сервиса для управления модальными окнами:

import { Injectable } from '@angular/core';
import * as tingle from 'tingle.js';

@Injectable({
  providedIn: 'root',
})
export class ModalService {
  private modal: any;

  constructor() {
    this.modal = new tingle.modal({
      footer: true,
      closeLabel: 'Закрыть',
      closeIcon: true,
      stickyFooter: false,
    });
  }

  open(content: string): void {
    this.modal.setContent(content);
    this.modal.open();
  }

  close(): void {
    this.modal.close();
  }
}

Теперь можно инжектировать этот сервис в компоненты и управлять модальными окнами централизованно:

import { Component } from '@angular/core';
import { ModalService } from './modal.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
})
export class ExampleComponent {

  constructor(private modalService: ModalService) {}

  openModal(): void {
    this.modalService.open('<h1>Это модальное окно!</h1>');
  }

  closeModal(): void {
    this.modalService.close();
  }
}

С помощью этого подхода можно централизованно управлять всеми модальными окнами в приложении, улучшив читаемость и поддержку кода.

Заключение

Использование библиотеки tingle.js в Angular позволяет быстро и эффективно создавать модальные окна для различных сценариев. Благодаря лёгкости и простоте работы с tingle.js можно интегрировать её в любую Angular-программу, при этом обеспечив гибкость управления состоянием и взаимодействием с окнами.