[Из песочницы] Модальные окна и нотификация в Angular12.01.2017 14:18

В данной статье я хочу рассказать о двух способах работы с модальными окнами:

1. «Обычное» добавление компонентов
2. Динамическое добавление компонентов

Сразу скажу что есть еще несколько способов добавления модальных окон, такие как добавление в стиле bootstrap (похоже на 1 способ, только в 1 способе модальное окно вынесли в отдельный компонент), так же никто не мешает использовать typescript чтоб напрямую в dom добавить какое-либо модальное окно, хоть этот способ мне и не нравится, но он существует.

Во всех примерах я буду опускать css и html в тех местах, где это не будет влиять на логику. Ссылка на репозиторий с исходным кодом будет приведена в конце статьи.

«Обычное» добавление компонентов.

@Component({
	           selector     : 'modal-dialog',
...
           })

export class ModalDialogComponent {
	@Input() header: string;
	@Input() description: string;
	@Output() isConfirmed: EventEmitter = new EventEmitter();
	private confirm() {
		this.isConfirmed.emit(true);
	}
	private close() {
		this.isConfirmed.emit(false);
	}
}

export class ModalDialogResult {
	public isConfirmed: boolean;
        public data:any;
}

Теперь для использованием диалогового окна нам необходимо добавить его в какой-либо модуль. Тут есть несколько способов:

1. Объединить модальные окна в один модуль
2. Добавить в тот модуль, где он будет использоваться

@NgModule({
	          imports     : [BrowserModule],
	          declarations: [SimpleModalPageComponent, ModalDialogComponent],
	          bootstrap   : [SimpleModalPageComponent]
          })

export class SimpleModalPageModule {
}

Теперь добавим модальное окно в template страницы:

	

		

			Заголовок:
			
		
		Содержимое:
		
	
	

		Show Dialog
	

Код страницы для отображения диалогового окна:

....
export class SimpleModalPageComponent {
	private isModalDialogVisible: boolean = false;
	public showDialog() {
		this.isModalDialogVisible = true;
	}

	public closeModal(isConfirmed: boolean) {
		this.isModalDialogVisible = false;
		...
	}
}

Для начала давайте создадим сервис, который будет отвечать за доступ к нотификации и модель нотификации:

@Injectable()
export class TinyNotificationService {
	private notifications: Subject = new Subject();

	public getNotifications(): Subject {
		return this.notifications;
	}

	public showToast(info: TinyNotificationModel) {
		this.notifications.next(info);
	}
}

export class TinyNotificationModel {
	public header: string;
	public description: string;

	constructor(header: string, description: string) {
		this.header      = header;
		this.description = description;
	}
}

Теперь определим компонент нотификации:

@Component({
	           selector     : "notifications",
	           template     : `

	

		

			
{{notification.header}}
			x
		
		

			{{notification.description}}
		
	
`
           })

export class TinyNotificationComponent {
	notifications: Set = new Set();

	constructor(private _notificationService: TinyNotificationService) {
		this._notificationService.getNotification()
		    .subscribe((notification: TinyNotificationModel)=> {
			    this.notifications.add(notification);
			    setTimeout(()=> {
				    this.closeNotification(notification);
			    }, 5000);
		    });
	}

	public closeNotification(notification: TinyNotificationModel) {
		this.notifications.delete(notification);
	}
}

Для использования такой нотификации необходимо добавить компонент нотификации, желательно, как можно выше в иерархии компонентов (в главный компонент).

Для использования добавляем в template страницы (SimpleModalPageComponent)

...
	constructor(private notificationService: TinyNotificationService) {}

	public showToast(header: string, description: string) {
		this.notificationService.showToast(new TinyNotificationModel(header, description));
	}
...

Динамическое добавление компонентов

А теперь перейдем к тому из-за чего я затеял написание этой статьи. Добавить компонент динамически «из воздуха» в Angular не получится (скорее всего можно, но это сложно и рискует часто ломаться с обновлениями). Поэтому все должно быть где-то определено явно (на мой взгляд это хорошо).

Для динамического добавления компонентов должно быть известно куда мы их планируем добавлять. Для этого нам необходимо получить объект ViewContainerRef.

Получить его можно следующим способом:

@Component({
...
	           template: `
...

`,
...
           })
export class DynamicModalPageComponent implements OnInit {
	@ViewChild('notificationBlock', { read: ViewContainerRef }) notificationBlock: ViewContainerRef;
	constructor(private notificationManager: NotificationManager) { }

	public ngOnInit(): void {
		this.notificationManager.init(this.notificationBlock);
	}
..
}

NotificationManager предназначен для работы с модальными окнами и нотификацией. Далее мы определим данный класс:

@Injectable()
export class NotificationManager {
	private notificationBlock: ViewContainerRef;
...
	constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

	public init(notificationBlock: ViewContainerRef) {
		this.notificationBlock = notificationBlock;
...
	}
...

	private createComponent(componentType: {new (...args: any[]): T;}): ComponentRef {
		const injector = ReflectiveInjector.fromResolvedProviders([], this.notificationBlock.parentInjector);
		const factory  = this.componentFactoryResolver.resolveComponentFactory(componentType);
		return factory.create(injector);
	}

	private createNotificationWithData(componentType: {new (...args: any[]): T;}, data: any): ComponentRef {
		const component = this.createComponent(componentType);
		Object.assign(component.instance, data);

		return component;
	}
}

Рассмотрим метод createComponent:

private createComponent(componentType: {new (...args: any[]): T;}): ComponentRef {
		const injector = ReflectiveInjector.fromResolvedProviders([], this.notificationBlock.parentInjector);
		const factory  = this.componentFactoryResolver.resolveComponentFactory(componentType);
		return factory.create(injector);
	}

Метод createNotificationWithData создает компонент и добавляет к нему данные:

private createNotificationWithData(componentType: {new (...args: any[]): T;}, data: any): ComponentRef {
		const component = this.createComponent(componentType);
		Object.assign(component.instance, data);

		return component;
	}

@Injectable()
export class NotificationManager {
...
	public showDialog(componentType: {new (...args: any[]): T;},
	                                             header: string,
	                                             description: string): Subject {
		const dialog = this.createNotificationWithData(componentType, {
			header     : header,
			description: description
		});
		this.notificationBlock.insert(dialog.hostView);
		const subject = dialog.instance.getDialogState();
		const sub     = subject.subscribe(x=> {
			dialog.destroy();
			sub.unsubscribe();
		});
		return subject;
	}
...
}

export abstract class ModalDialogBase {
	public abstract getDialogState(): Subject;
}

export enum ModalDialogResult{
	Opened,
	Confirmed,
	Closed
}

Для добавления компонента используем метод insert у notificationBlock

this.notificationBlock.insert(dialog.hostView);

const subject = dialog.instance.getDialogState();
const sub     = subject.subscribe(x=> {
			dialog.destroy();
			sub.unsubscribe();
		});

Под спойлером код модального окна:

@Component({
	           selector     : 'modal-dialog',
	           template     : `

	

		

			
{{header}}
			x
		
		

			{{description}}
		
		

			ОК
			Отмена
		
	

`
           })

export class ModalDialogComponent extends ModalDialogBase {
	private header: string;
	private description: string;
	private modalState: Subject;
	constructor() {
		super();
		this.modalState = new Subject();
	}
	public getDialogState(): Subject {
		return this.modalState;
	}
	private confirm() {
		this.modalState.next(ModalDialogResult.Confirmed);
	}
	private close() {
		this.modalState.next(ModalDialogResult.Closed);
	}
}

@Component({
	           selector     : 'notification-panel',
	           template     : `

	


           })
export class NotificationPanelComponent {
	@ViewChild('notifications', { read: ViewContainerRef }) notificationBlock: ViewContainerRef;

	public showNotification(componentRef: ComponentRef, timeOut: number) {
		const toast = componentRef;
		this.notificationBlock.insert(toast.hostView);
		let subscription = toast.instance.getClosedEvent()
		                        .subscribe(()=> {
			                        this.destroyComponent(toast, subscription);
		                        });
		setTimeout(()=> {
			toast.instance.close();
		}, timeOut);
	}

	private destroyComponent(componentRef: ComponentRef, subscription: Subscription) {
		componentRef.destroy();
		subscription.unsubscribe();
	}
}

Все нотификации должны наследоваться от класса NotificationBase.

export abstract class NotificationBase {
	protected closedEvent = new Subject();

	public getClosedEvent(){
		return this.closedEvent;
	}
	public abstract close(): void;
}

@Component({
	           selector     : 'tiny-notification',
	           template     : `

	

		
{{header}}
		x
	
	

		{{description}}
	
`
           })
export class TinyNotificationComponent extends NotificationBase {
	public header: string;
	public description: string;

	close() {
		this.closedEvent.next();
		this.closedEvent.complete();
	}
}

@Injectable()
export class NotificationManager {
	private notificationBlock: ViewContainerRef;
	private notificationPanel: NotificationPanelComponent;

	constructor(private componentFactoryResolver: ComponentFactoryResolver) { }

	public init(notificationBlock: ViewContainerRef) {
		this.notificationBlock = notificationBlock;
		const component          = this.createComponent(NotificationPanelComponent);
		this.notificationPanel = component.instance;
		this.notificationBlock.insert(component.hostView);
	}
...
	public showToast(header: string, description: string, timeOut: number = 3000) {
		const component = this.createNotificationWithData(TinyNotificationComponent, {
			header     : header,
			description: description
		});
		this.notificationPanel.showNotification(component, timeOut);
	}
...

В оф. документации написано:

entryComponents : Array|any[]>
Specifies a list of components that should be compiled when this module is defined. For each component listed here, Angular will create a ComponentFactory and store it in the ComponentFactoryResolver.

Пример модуля:

@NgModule({
 declarations   : [TinyNotificationComponent, NotificationPanelComponent, ModalDialogComponent],
entryComponents: [TinyNotificationComponent, NotificationPanelComponent, ModalDialogComponent],
providers      : [NotificationManager]
          })
export class NotificationModule {
}

Теперь для использования модальных окон необходимо только указать NotificationModule в imports и можно использовать.

Пример использования:

...
export class DynamicModalPageComponent implements OnInit {
	....
	constructor(private notificationManager: NotificationManager) { }

	public ngOnInit(): void {
		this.notificationManager.init(this.notificationBlock);
	}

	public showToast(header: string, description: string) {
		this.notificationManager.showToast(header, description, 3000);
	}

	public showDialog(header: string, description: string) {
		this.notificationManager.showDialog(ModalDialogComponent, header, description)
		    .subscribe((x: ModalDialogResult)=> {
			    if (x == ModalDialogResult.Confirmed) {
				    this.showToast(header, "modal dialog is confirmed");
			    }
			    else {
				    this.showToast(header, "modal dialog is closed");
			    }
		    });
	}
}

→ Исходный код по статье находится в данном репозитории.

Комментарии (0)