javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(angular): change detection in deep ViewContainers

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-10 23:51:59 +02:00
parent 4d23cba8a0
commit 850d7fc74d
10 changed files with 182 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
angular/src/providers/angular-delegate.ts
View File

@ -1,4 +1,4 @@
import { ApplicationRef, ComponentFactoryResolver, Injectable, InjectionToken, Injector, NgZone } from '@angular/core';
import { ComponentFactoryResolver, Injectable, InjectionToken, Injector, NgZone, ViewContainerRef } from '@angular/core';
import { FrameworkDelegate, ViewLifecycle } from '@ionic/core';
import { NavParams } from '../directives/navigation/nav-params';
@ -7,12 +7,15 @@ import { NavParams } from '../directives/navigation/nav-params';
export class AngularDelegate {
constructor(
private appRef: ApplicationRef,
private zone: NgZone
) {}
create(cfr: ComponentFactoryResolver, injector: Injector) {
return new AngularFrameworkDelegate(cfr, injector, this.appRef, this.zone);
create(
resolver: ComponentFactoryResolver,
injector: Injector,
location: ViewContainerRef,
) {
return new AngularFrameworkDelegate(resolver, injector, location, this.zone);
}
}
@ -22,9 +25,9 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
private elRefMap = new WeakMap<HTMLElement, any>();
constructor(
private cfr: ComponentFactoryResolver,
private resolver: ComponentFactoryResolver,
private injector: Injector,
private appRef: ApplicationRef,
private location: ViewContainerRef,
private zone: NgZone,
) {}
@ -32,7 +35,7 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
return new Promise(resolve => {
this.zone.run(() => {
const el = attachView(
this.cfr, this.injector, this.appRef, this.elRefMap,
this.resolver, this.injector, this.location, this.elRefMap,
container, component, params, cssClasses
);
resolve(el);
@ -55,26 +58,25 @@ export class AngularFrameworkDelegate implements FrameworkDelegate {
}
export function attachView(
cfr: ComponentFactoryResolver,
resolver: ComponentFactoryResolver,
injector: Injector,
appRef: ApplicationRef,
location: ViewContainerRef,
elRefMap: WeakMap<HTMLElement, any>,
container: any, component: any, params?: any, cssClasses?: string[]) {
const componentFactory = cfr.resolveComponentFactory(component);
const hostElement = document.createElement(componentFactory.selector);
const factory = resolver.resolveComponentFactory(component);
const childInjector = Injector.create(getProviders(params), injector);
const componentRef = location.createComponent(factory, location.length, childInjector);
const hostElement = componentRef.location.nativeElement;
if (params) {
Object.assign(hostElement, params);
}
const childInjector = Injector.create(getProviders(params), injector);
const componentRef = componentFactory.create(childInjector, [], hostElement);
for (const clazz of cssClasses) {
hostElement.classList.add(clazz);
}
bindLifecycleEvents(componentRef.instance, hostElement);
container.appendChild(hostElement);
appRef.attachView(componentRef.hostView);
componentRef.changeDetectorRef.reattach();
elRefMap.set(hostElement, componentRef);
return hostElement;
}