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

feature(nav-params): add navs params injectable

Browse Source
This commit is contained in:
Dan Bucholtz
2017-12-22 23:24:38 -06:00
parent 2b4cdda7e9
commit 6995af6027
9 changed files with 32 additions and 19 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> {
const hostElement = document.createElement('div');
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, classesToAdd);
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd);
}
removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {

20
packages/angular/src/di/di.ts
View File

@ -1,14 +1,12 @@
import { InjectionToken } from '@angular/core';
import { App } from '../providers/app';
import { NavController } from '../providers/nav-controller';
import { NavParams } from '../providers/nav-params';
export const NavControllerToken = new InjectionToken<any>('NavControllerToken');
export const ViewControllerToken = new InjectionToken<any>('ViewControllerToken');
export const AppToken = new InjectionToken<any>('AppToken');
export const NavParamsToken = new InjectionToken<any>('NavParamsToken');
export function getProviders(element: HTMLElement) {
export function getProviders(element: HTMLElement, data: any) {
if (element.tagName !== 'ion-nav') {
element.closest('ion-nav');
}
@ -25,11 +23,12 @@ export function getProviders(element: HTMLElement) {
},
{
provide: AppToken, useValue: null,
provide: NavControllerToken, useValue: data
},
{
provide: App, useFactory: provideAppInjectable, deps: [AppToken]
}
provide: NavParams, useFactory: provideNavParamsInjectable, deps: [NavControllerToken]
},
]
}
@ -37,7 +36,6 @@ export function provideNavControllerInjectable(element: HTMLIonNavElement) {
return new NavController(element);
}
export function provideAppInjectable() {
const element = document.querySelector('ion-app');
return new App(element);
export function provideNavParamsInjectable(data: any) {
return new NavParams(data);
}

1
packages/angular/src/index.ts
View File

@ -11,5 +11,6 @@ export { Events } from './providers/events';
export { LoadingController, LoadingProxy } from './providers/loading-controller';
export { ModalController, ModalProxy } from './providers/modal-controller';
export { NavController } from './providers/nav-controller';
export { NavParams } from './providers/nav-params';
export { PopoverController, PopoverProxy } from './providers/popover-controller';
export { ToastController, ToastProxy } from './providers/toast-controller';

2
packages/angular/src/module.ts
View File

@ -19,6 +19,7 @@ import { IonNavDelegate } from './components/ion-nav';
import { ActionSheetController } from './providers/action-sheet-controller';
import { AlertController } from './providers/alert-controller';
import { AngularComponentMounter } from './providers/angular-component-mounter';
import { App } from './providers/app';
import { Events } from './providers/events';
import { LoadingController } from './providers/loading-controller';
import { ModalController } from './providers/modal-controller';
@ -57,6 +58,7 @@ export class IonicAngularModule {
AlertController,
ActionSheetController,
AngularComponentMounter,
App,
Events,
LoadingController,
ModalController,

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

@ -20,14 +20,14 @@ export class AngularComponentMounter {
constructor(private defaultCfr: ComponentFactoryResolver, private zone: NgZone, private appRef: ApplicationRef) {
}
attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, classesToAdd: string[]): Promise<AngularMountingData> {
attachViewToDom(parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, componentResolveFactory: ComponentFactoryResolver, injector: Injector, data: any, classesToAdd: string[]): Promise<AngularMountingData> {
return new Promise((resolve) => {
this.zone.run(() => {
const crf = componentResolveFactory ? componentResolveFactory : this.defaultCfr;
const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, classesToAdd);
const mountingData = attachViewToDom(crf, parentElement, hostElement, componentToMount, injector, this.appRef, data, classesToAdd);
resolve(mountingData);
});
});
@ -50,9 +50,9 @@ export function removeViewFromDom(childElement: HTMLElement) {
}
}
export function attachViewToDom(crf: ComponentFactoryResolver, parentElement: HTMLElement, hostElement: HTMLElement, componentToMount: Type<any>, injector: Injector, appRef: ApplicationRef, classesToAdd: string[]): 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));
const componentProviders = ReflectiveInjector.resolve(getProviders(parentElement, data));
const componentFactory = crf.resolveComponentFactory(componentToMount);
const childInjector = ReflectiveInjector.fromResolvedProviders(componentProviders, injector);
const componentRef = componentFactory.create(childInjector, [], hostElement);

4
packages/angular/src/providers/app.ts
View File

@ -2,7 +2,9 @@ import { NavContainer } from '@ionic/core';
export class App {
constructor(public _element: HTMLIonAppElement) {
_element: HTMLIonAppElement;
constructor() {
this._element = document.querySelector('ion-app');
}
setTitle(title: string) {

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

@ -32,7 +32,7 @@ export class ModalController implements FrameworkDelegate {
attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
const hostElement = document.createElement('div');
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, classesToAdd);
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd);
}
removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {

10
packages/angular/src/providers/nav-params.ts Normal file
View File

@ -0,0 +1,10 @@
export class NavParams {
constructor(public data: any = {}) {
}
get(param: string): any {
return this.data[param];
}
}

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

@ -32,7 +32,7 @@ export class PopoverController implements FrameworkDelegate {
attachViewToDom(elementOrContainerToMountTo: HTMLElement, elementOrComponentToMount: Type<any>, _propsOrDataObj?: any, classesToAdd?: string[]): Promise<AngularMountingData> {
const hostElement = document.createElement('div');
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, classesToAdd);
return this.angularComponentMounter.attachViewToDom(elementOrContainerToMountTo, hostElement, elementOrComponentToMount, this.componentResolveFactory, this.injector, _propsOrDataObj, classesToAdd);
}
removeViewFromDom(_parentElement: HTMLElement, childElement: HTMLElement) {