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

refactor(modal): use framework delegate for mounting the user's component

Browse Source
This commit is contained in:
Dan Bucholtz
2017-12-14 00:10:52 -06:00
parent c30337bf8c
commit ec33d4e725
35 changed files with 546 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,65 +1,33 @@
import {
ChangeDetectorRef,
Component,
ComponentFactoryResolver,
ComponentRef,
Directive,
ElementRef,
Injector,
ReflectiveInjector,
Type,
ViewContainerRef,
ViewChild
} from '@angular/core';
import { FrameworkDelegate } from '@ionic/core';
import { getProviders } from '../di/di';
import { AngularComponentMounter } from '../providers/angular-component-mounter';
import { AngularMountingData } from '../types/interfaces';
const elementToComponentRefMap = new Map<HTMLElement, ComponentRef<any>>();
@Component({
@Directive({
selector: 'ion-nav',
template: `
<div #viewport class="ng-nav-viewport"></div>
`
})
export class IonNavDelegate implements FrameworkDelegate {
@ViewChild('viewport', { read: ViewContainerRef}) viewport: ViewContainerRef;
constructor(private elementRef: ElementRef, private changeDetection: ChangeDetectorRef, private angularComponentMounter: AngularComponentMounter, private injector: Injector, private componentResolveFactory: ComponentFactoryResolver) {
constructor(private elementRef: ElementRef, private angularComponentMounter: AngularComponentMounter, private componentResolveFactory: ComponentFactoryResolver, private injector: Injector) {
this.elementRef.nativeElement.delegate = this;
}
async attachViewToDom(elementOrContainerToMountTo: HTMLIonNavElement, elementOrComponentToMount: Type<any>,
_propsOrDataObj?: any, _classesToAdd?: string[]): Promise<AngularMountingData> {
attachViewToDom(elementOrContainerToMountTo: HTMLIonNavElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
const componentProviders = ReflectiveInjector.resolve(getProviders(elementOrContainerToMountTo));
console.log('componentProviders: ', componentProviders);
const element = document.createElement('ion-page');
for (const clazz of _classesToAdd) {
element.classList.add(clazz);
}
elementOrContainerToMountTo.appendChild(element);
const mountingData = await this.angularComponentMounter.attachViewToDom(element, elementOrComponentToMount, [], this.changeDetection, this.componentResolveFactory, this.injector);
mountingData.element = element;
elementToComponentRefMap.set(mountingData.angularHostElement, mountingData.componentRef);
return mountingData;
const hostElement = document.createElement('div');
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, classesToAdd);
}
async removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {
const componentRef = elementToComponentRefMap.get(childElement);
if (componentRef) {
return this.angularComponentMounter.removeViewFromDom(componentRef);
}
return Promise.resolve();
removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {
return this.angularComponentMounter.removeViewFromDom(childElement);
}
}