diff --git a/nativescript-angular/directives/dialogs.ts b/nativescript-angular/directives/dialogs.ts index e9280f989..7e5aa78bf 100644 --- a/nativescript-angular/directives/dialogs.ts +++ b/nativescript-angular/directives/dialogs.ts @@ -1,4 +1,4 @@ -import { ComponentFactoryResolver, ComponentRef, Injectable, Injector, NgModuleRef, Type, ViewContainerRef } from '@angular/core'; +import { ComponentFactoryResolver, ComponentRef, Injectable, Injector, NgModuleRef, NgZone, Type, ViewContainerRef } from '@angular/core'; import { Frame, View, ViewBase, ProxyViewContainer, ShowModalOptions } from '@nativescript/core'; import { NSLocationStrategy } from '../router/ns-location-strategy'; @@ -32,7 +32,7 @@ export class ModalDialogParams { @Injectable() export class ModalDialogService { - constructor(private location: NSLocationStrategy) {} + constructor(private location: NSLocationStrategy, private zone: NgZone) {} public showModal(type: Type, options: ModalDialogOptions): Promise { if (!options.viewContainerRef) { @@ -98,8 +98,10 @@ export class ModalDialogService { if (componentView) { componentView.closeModal(); this.location._closeModalNavigation(); - detachedLoaderRef.instance.detectChanges(); - detachedLoaderRef.destroy(); + this.zone.run(() => { + detachedLoaderRef.instance.detectChanges(); + detachedLoaderRef.destroy(); + }); } }); @@ -111,20 +113,22 @@ export class ModalDialogService { }); const detachedFactory = options.resolver.resolveComponentFactory(DetachedLoader); detachedLoaderRef = options.containerRef.createComponent(detachedFactory, 0, childInjector, null); - detachedLoaderRef.instance.loadComponent(options.type).then((compRef) => { - const detachedProxy = compRef.location.nativeElement; + this.zone.run(() => { + detachedLoaderRef.instance.loadComponent(options.type).then((compRef) => { + const detachedProxy = compRef.location.nativeElement; - if (detachedProxy.getChildrenCount() > 1) { - throw new Error('Modal content has more than one root view.'); - } - componentView = detachedProxy.getChildAt(0); + if (detachedProxy.getChildrenCount() > 1) { + throw new Error('Modal content has more than one root view.'); + } + componentView = detachedProxy.getChildAt(0); - if (componentView.parent) { - (componentView.parent)._ngDialogRoot = componentView; - (componentView.parent).removeChild(componentView); - } + if (componentView.parent) { + (componentView.parent)._ngDialogRoot = componentView; + (componentView.parent).removeChild(componentView); + } - options.parentView.showModal(componentView, { ...options, closeCallback }); + options.parentView.showModal(componentView, { ...options, closeCallback }); + }); }); } } diff --git a/nativescript-angular/directives/list-view-comp.ts b/nativescript-angular/directives/list-view-comp.ts index dc357d7e9..62e1eadfe 100644 --- a/nativescript-angular/directives/list-view-comp.ts +++ b/nativescript-angular/directives/list-view-comp.ts @@ -1,4 +1,4 @@ -import { ChangeDetectionStrategy, Component, ElementRef, IterableDiffers, forwardRef } from '@angular/core'; +import { ChangeDetectionStrategy, Component, ElementRef, IterableDiffers, forwardRef, NgZone } from '@angular/core'; import { ListView } from '@nativescript/core'; import { TEMPLATED_ITEMS_COMPONENT, TemplatedItemsComponent } from './templated-items-comp'; @@ -17,7 +17,7 @@ export class ListViewComponent extends TemplatedItemsComponent { protected templatedItemsView: ListView; - constructor(_elementRef: ElementRef, _iterableDiffers: IterableDiffers) { - super(_elementRef, _iterableDiffers); + constructor(_elementRef: ElementRef, _iterableDiffers: IterableDiffers, zone: NgZone) { + super(_elementRef, _iterableDiffers, zone); } } diff --git a/nativescript-angular/directives/templated-items-comp.ts b/nativescript-angular/directives/templated-items-comp.ts index 302f85377..5514ffa7b 100644 --- a/nativescript-angular/directives/templated-items-comp.ts +++ b/nativescript-angular/directives/templated-items-comp.ts @@ -1,4 +1,4 @@ -import { AfterContentInit, ContentChild, Directive, DoCheck, ElementRef, EmbeddedViewRef, EventEmitter, Host, Inject, InjectionToken, Input, IterableDiffer, IterableDiffers, OnDestroy, Output, TemplateRef, ViewChild, ViewContainerRef, ɵisListLikeIterable as isListLikeIterable, Injectable } from '@angular/core'; +import { AfterContentInit, ContentChild, Directive, DoCheck, ElementRef, EmbeddedViewRef, EventEmitter, Host, Inject, InjectionToken, Input, IterableDiffer, IterableDiffers, OnDestroy, Output, TemplateRef, ViewChild, ViewContainerRef, ɵisListLikeIterable as isListLikeIterable, Injectable, NgZone } from '@angular/core'; import { ObservableArray, View, KeyedTemplate, LayoutBase, ItemEventData, TemplatedItemsView, profile } from '@nativescript/core'; import { getSingleViewRecursive } from '../element-registry'; @@ -54,7 +54,7 @@ export abstract class TemplatedItemsComponent implements DoCheck, OnDestroy, Aft this.templatedItemsView.items = this._items; } - constructor(_elementRef: ElementRef, private _iterableDiffers: IterableDiffers) { + constructor(_elementRef: ElementRef, private _iterableDiffers: IterableDiffers, private zone: NgZone) { this.templatedItemsView = _elementRef.nativeElement; this.templatedItemsView.on('itemLoading', this.onItemLoading, this); @@ -188,8 +188,10 @@ export abstract class TemplatedItemsComponent implements DoCheck, OnDestroy, Aft NativeScriptDebug.listViewLog(`Manually detect changes in child: ${index}`); } - viewRef.markForCheck(); - viewRef.detectChanges(); + this.zone.run(() => { + viewRef.markForCheck(); + viewRef.detectChanges(); + }); } ngDoCheck() {