У розвитку веб-додатків на Angular часто виникає потреба у створенні модальних вікон для взаємодії з користувачем. Один з популярних способів створення модальних вікон у проєктах Angular – використання бібліотеки @ng-bootstrap/ng-bootstrap. Проте, при роботі з NgbModal може виникати проблема з коректним визначенням типу modalInstance, що може призводити до неправильної типізації даних та збоїв у роботі додатку.
Одним із способів вирішення цієї проблеми є створення власного оголошення типу для NgbModal, яке правильно визначатиме тип modalInstance. У цій статті ми розглянемо, як саме це можна зробити.
При роботі з NgbModal може виникати ситуація, коли важко або неможливо правильно визначити тип modalInstance. Наприклад, метод open NgbModal приймає параметр content з типом any:
1 2 3 |
export declare class NgbModal { open(content: any, options?: NgbModalOptions): NgbModalRef; } |
Це призводить до того, що при доступі до властивостей компонента, переданого у параметрі content, тип даних не може бути визначений іншими засобами Angular, і він автоматично встановлюється як any.
Аналогічна проблема виникає й у методі get componentInstance() класу NgbModalRef:
1 2 3 |
export declare class NgbModalRef { get componentInstance(): any; } |
Це робить неможливим визначення типу modalInstance за допомогою стандартних засобів Angular.
Один із шляхів вирішення цієї проблеми – створення власного оголошення типу для NgbModal та NgbModalRef, яке дозволить правильно визначити тип modalInstance.
Створимо файл types.d.ts, в якому оголосимо нові інтерфейси для NgbModal та NgbModalRef:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { NgbModal as _NgbModal, NgbModalOptions, NgbModalRef as _NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; declare module '@ng-bootstrap/ng-bootstrap' { export interface NgbModal extends _NgbModal { open<T>(content: T, options?: NgbModalOptions): NgbModalRef<T>; } export interface NgbModalRef<T> extends _NgbModalRef { get componentInstance(): InstanceType<T>; } } |
Це оголошення розширює вбудовані інтерфейси NgbModal та NgbModalRef, додаючи генерік T, який використовується для точного визначення типу modalInstance.
Для демонстрації використаємо клас ModalComponent з наступною структурою:
1 2 3 4 5 6 7 8 9 10 11 12 |
export type ModalOption = { title: string; buttonText: string; }; @Component({ selector: 'app-modal', templateUrl: './modal.component.html', styleUrls: ['./modal.component.scss'] }) export class ModalComponent { @Input() data: ModalOption = {}; } |
Тепер, при використанні NgbModal, ми можемо передавати типізований параметр content та правильно визначати тип modalInstance:
1 2 3 4 5 6 7 8 9 |
// Відкрити модалку const changeConfirmationModal = modalService.open(ModalComponent, { centered: true }); // Встановити дані модалки changeConfirmationModal.componentInstance.data = { title: 'Some Title', buttonText: 'Some Button Text' }; |
Таким чином, з використанням власного оголошення типу для NgbModal та NgbModalRef, ми можемо точно визначати тип modalInstance, що дозволяє уникнути проблем з неправильною типізацією даних та забезпечити коректну роботу додатку на Angular.