diff --git a/nativescript-angular/common/detached-loader.ts b/nativescript-angular/common/detached-loader.ts index 27ffb2298..960a6001f 100644 --- a/nativescript-angular/common/detached-loader.ts +++ b/nativescript-angular/common/detached-loader.ts @@ -41,6 +41,10 @@ export class DetachedLoader { // tslint:disable-line:component-class-suffix return Promise.resolve(componentRef); } + public detectChanges() { + this.changeDetector.markForCheck(); + } + // TODO: change this API -- async promises not needed here anymore. public loadComponent(componentType: Type): Promise> { log("DetachedLoader.loadComponent"); diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index a8b1850db..fa388f3dd 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -1,101 +1,102 @@ -import { - ReflectiveInjector, ComponentFactoryResolver, ViewContainerRef, - Type, Injectable, ComponentRef, Directive -} from "@angular/core"; -import { Page } from "ui/page"; -import { View } from "ui/core/view"; -import { DetachedLoader } from "../common/detached-loader"; -import { PageFactory, PAGE_FACTORY } from "../platform-providers"; - -export interface ModalDialogOptions { - context?: any; - fullscreen?: boolean; - viewContainerRef?: ViewContainerRef; -} - -export class ModalDialogParams { - constructor( - public context: any = {}, - public closeCallback: (...args) => any) { - } -} - -@Injectable() -export class ModalDialogService { - public showModal(type: Type, options: ModalDialogOptions): Promise { - if (!options.viewContainerRef) { - throw new Error( - "No viewContainerRef: Make sure you pass viewContainerRef in ModalDialogOptions."); - } - - const viewContainerRef = options.viewContainerRef; - const parentPage: Page = viewContainerRef.injector.get(Page); - const resolver: ComponentFactoryResolver = viewContainerRef.injector.get( - ComponentFactoryResolver); - const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY); - - return new Promise((resolve) => { - setTimeout(() => ModalDialogService.showDialog( - type, - options, - resolve, - viewContainerRef, - resolver, - parentPage, - pageFactory - ), 10); - }); - } - - private static showDialog( - type: Type, - options: ModalDialogOptions, - doneCallback, - containerRef: ViewContainerRef, - resolver: ComponentFactoryResolver, - parentPage: Page, - pageFactory: PageFactory): void { - - const page = pageFactory({ isModal: true, componentType: type }); - - let detachedLoaderRef: ComponentRef; - const closeCallback = (...args) => { - doneCallback.apply(undefined, args); - page.closeModal(); - detachedLoaderRef.destroy(); - }; - - const modalParams = new ModalDialogParams(options.context, closeCallback); - - const providers = ReflectiveInjector.resolve([ - { provide: Page, useValue: page }, - { provide: ModalDialogParams, useValue: modalParams }, - ]); - - const childInjector = ReflectiveInjector.fromResolvedProviders( - providers, containerRef.parentInjector); - const detachedFactory = resolver.resolveComponentFactory(DetachedLoader); - detachedLoaderRef = containerRef.createComponent(detachedFactory, -1, childInjector, null); - detachedLoaderRef.instance.loadComponent(type).then((compRef) => { - const componentView = compRef.location.nativeElement; - - if (componentView.parent) { - (componentView.parent).removeChild(componentView); - } - - page.content = componentView; - parentPage.showModal(page, options.context, closeCallback, options.fullscreen); - }); - } -} - - -@Directive({ - selector: "[modal-dialog-host]" // tslint:disable-line:directive-selector -}) -export class ModalDialogHost { // tslint:disable-line:directive-class-suffix - constructor() { - throw new Error("ModalDialogHost is deprecated. Call ModalDialogService.showModal() " + - "by passing ViewContainerRef in the options instead."); - } -} +import { + ReflectiveInjector, ComponentFactoryResolver, ViewContainerRef, + Type, Injectable, ComponentRef, Directive +} from "@angular/core"; +import { Page } from "ui/page"; +import { View } from "ui/core/view"; +import { DetachedLoader } from "../common/detached-loader"; +import { PageFactory, PAGE_FACTORY } from "../platform-providers"; + +export interface ModalDialogOptions { + context?: any; + fullscreen?: boolean; + viewContainerRef?: ViewContainerRef; +} + +export class ModalDialogParams { + constructor( + public context: any = {}, + public closeCallback: (...args) => any) { + } +} + +@Injectable() +export class ModalDialogService { + public showModal(type: Type, options: ModalDialogOptions): Promise { + if (!options.viewContainerRef) { + throw new Error( + "No viewContainerRef: Make sure you pass viewContainerRef in ModalDialogOptions."); + } + + const viewContainerRef = options.viewContainerRef; + const parentPage: Page = viewContainerRef.injector.get(Page); + const resolver: ComponentFactoryResolver = viewContainerRef.injector.get( + ComponentFactoryResolver); + const pageFactory: PageFactory = viewContainerRef.injector.get(PAGE_FACTORY); + + return new Promise((resolve) => { + setTimeout(() => ModalDialogService.showDialog( + type, + options, + resolve, + viewContainerRef, + resolver, + parentPage, + pageFactory + ), 10); + }); + } + + private static showDialog( + type: Type, + options: ModalDialogOptions, + doneCallback, + containerRef: ViewContainerRef, + resolver: ComponentFactoryResolver, + parentPage: Page, + pageFactory: PageFactory): void { + + const page = pageFactory({ isModal: true, componentType: type }); + + let detachedLoaderRef: ComponentRef; + const closeCallback = (...args) => { + doneCallback.apply(undefined, args); + page.closeModal(); + detachedLoaderRef.instance.detectChanges(); + detachedLoaderRef.destroy(); + }; + + const modalParams = new ModalDialogParams(options.context, closeCallback); + + const providers = ReflectiveInjector.resolve([ + { provide: Page, useValue: page }, + { provide: ModalDialogParams, useValue: modalParams }, + ]); + + const childInjector = ReflectiveInjector.fromResolvedProviders( + providers, containerRef.parentInjector); + const detachedFactory = resolver.resolveComponentFactory(DetachedLoader); + detachedLoaderRef = containerRef.createComponent(detachedFactory, -1, childInjector, null); + detachedLoaderRef.instance.loadComponent(type).then((compRef) => { + const componentView = compRef.location.nativeElement; + + if (componentView.parent) { + (componentView.parent).removeChild(componentView); + } + + page.content = componentView; + parentPage.showModal(page, options.context, closeCallback, options.fullscreen); + }); + } +} + + +@Directive({ + selector: "[modal-dialog-host]" // tslint:disable-line:directive-selector +}) +export class ModalDialogHost { // tslint:disable-line:directive-class-suffix + constructor() { + throw new Error("ModalDialogHost is deprecated. Call ModalDialogService.showModal() " + + "by passing ViewContainerRef in the options instead."); + } +}