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

refactor(delegate): don't wrap in ion-page

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-09 13:22:24 -06:00
parent 09b60e05b5
commit a0121dd3bc
5 changed files with 8 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/angular/src/components/ion-nav.ts
View File

@ -23,7 +23,7 @@ export class IonNavDelegate implements FrameworkDelegate {
attachViewToDom(elementOrContainerToMountTo: HTMLIonNavElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> { attachViewToDom(elementOrContainerToMountTo: HTMLIonNavElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
// wrap whatever the user provides in an ion-page // wrap whatever the user provides in an ion-page
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd, true); return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd);
} }
removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) { removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) {

22
packages/angular/src/providers/angular-component-mounter.ts
View File

@ -19,14 +19,14 @@ export class AngularComponentMounter {
constructor(private defaultCfr: ComponentFactoryResolver, private zone: NgZone, private appRef: ApplicationRef) { constructor(private defaultCfr: ComponentFactoryResolver, private zone: NgZone, private appRef: ApplicationRef) {
} }
attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, data: any, classesToAdd: string[], wrapUserComponentInIonPage: boolean): Promise<AngularMountingData> { attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, data: any, classesToAdd: string[]): Promise<AngularMountingData> {
return new Promise((resolve) => { return new Promise((resolve) => {
this.zone.run(() => { this.zone.run(() => {
const crf = componentResolveFactory ? componentResolveFactory : this.defaultCfr; const crf = componentResolveFactory ? componentResolveFactory : this.defaultCfr;
const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, data, classesToAdd, wrapUserComponentInIonPage); const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, data, classesToAdd);
resolve(mountingData); resolve(mountingData);
}); });
}); });
@ -43,18 +43,14 @@ export class AngularComponentMounter {
} }
export function removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) { export function removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {
const mountingData = elementToComponentRefMap.get(childElement); const mountingData = elementToComponentRefMap.get(childElement);
if (mountingData) { if (mountingData) {
const componentParent = mountingData.element.parentNode;
mountingData.componentRef.destroy(); mountingData.componentRef.destroy();
if (mountingData.wrapUserComponentInIonPage && parentElement.contains(componentParent) ) {
parentElement.removeChild(componentParent)
}
} }
} }
export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, injector: Injector, appRef: ApplicationRef, data: any, classesToAdd: string[], wrapUserComponentInIonPage: boolean): AngularMountingData { export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, injector: Injector, appRef: ApplicationRef, data: any, classesToAdd: string[]): AngularMountingData {
const componentProviders = ReflectiveInjector.resolve(getProviders(parentElement, data)); const componentProviders = ReflectiveInjector.resolve(getProviders(parentElement, data));
const componentFactory = crf.resolveComponentFactory(componentToMount); const componentFactory = crf.resolveComponentFactory(componentToMount);
@ -68,8 +64,7 @@ export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HT
hostElement.classList.add(clazz); hostElement.classList.add(clazz);
} }
const elementToAppend = wrapUserComponentInIonPage ? getIonPageElement(hostElement) : hostElement; parentElement.appendChild(hostElement);
parentElement.appendChild(elementToAppend);
appRef.attachView(componentRef.hostView); appRef.attachView(componentRef.hostView);
@ -80,16 +75,9 @@ export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HT
instance: componentRef.instance, instance: componentRef.instance,
angularHostElement: componentRef.location.nativeElement, angularHostElement: componentRef.location.nativeElement,
element: hostElement, element: hostElement,
wrapUserComponentInIonPage
}; };
elementToComponentRefMap.set(hostElement, mountingData); elementToComponentRefMap.set(hostElement, mountingData);
return mountingData; return mountingData;
} }
export function getIonPageElement(hostElement: HTMLElement) {
const page = document.createElement('ion-page');
page.appendChild(hostElement);
return page;
}

2
packages/angular/src/providers/modal-controller.ts
View File

@ -38,7 +38,7 @@ export class ModalController implements FrameworkDelegate {
attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> { attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd, true); return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd);
} }
removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) { removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) {

2
packages/angular/src/providers/popover-controller.ts
View File

@ -31,7 +31,7 @@ export class PopoverController implements FrameworkDelegate {
attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> { attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd, false); return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, null, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd);
} }
removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) { removeViewFromDom(parentElement: HTMLElement, childElement: HTMLElement) {

1
packages/angular/src/types/interfaces.ts
View File

@ -12,5 +12,4 @@ export interface AngularMountingData extends FrameworkMountingData {
componentRef?: ComponentRef<any>; componentRef?: ComponentRef<any>;
instance?: any; instance?: any;
angularHostElement?: HTMLElement; angularHostElement?: HTMLElement;
wrapUserComponentInIonPage?: boolean;
} }