From 729529f40e8d22c479a3fb93930bed39d2d1fb2c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 25 Jan 2024 12:51:57 -0500 Subject: [PATCH] refactor: remove NavParams --- BREAKING.md | 78 +++++++++++++++++++ .../src/directives/navigation/nav-params.ts | 43 ---------- packages/angular/common/src/index.ts | 2 - .../common/src/providers/angular-delegate.ts | 42 +--------- packages/angular/src/index.ts | 1 - packages/angular/standalone/src/index.ts | 1 - 6 files changed, 79 insertions(+), 88 deletions(-) delete mode 100644 packages/angular/common/src/directives/navigation/nav-params.ts diff --git a/BREAKING.md b/BREAKING.md index 22482f89240..3896ee79da4 100644 --- a/BREAKING.md +++ b/BREAKING.md @@ -22,6 +22,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver - [Datetime](#version-8x-datetime) - [Nav](#version-8x-nav) - [Picker](#version-8x-picker) +- [Angular](#version-8x-angular)

Browser and Platform Support

@@ -143,3 +144,80 @@ This allows components to inherit the color properly when used outside of Ionic - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period. - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively. - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. + +

Angular

+ +- NavParams has been removed in favor of using Angular's Input API. Components that accessed parameters should ensure that an input is created for each parameter: + +**Old** +```js +import { NavParams } from '@ionic/angular'; + +console.log(this.navParams.get('myProp')); +``` + +**New** +```js +import { Input } from '@angular/core'; + +... + +@Input() myProp: string; + +ngOnInit() { + console.log(this.myProp) +} +``` + +Developers who were using `NavParams` as a pass through to an encapsulated IonNav component can use a single `Input` to achieve the same behavior. + +**Old** +```js +// home.page.ts +const modal = await modalCtrl.create({ + component: NavComponent, + componentProps: { + foo: 'hello', + bar: 'goodbye' + } +}); +``` + +```js +// nav.component.ts +public rootParams = {}; + +constructor(private navParams: NavParams) { + this.rootParams = { + ...navParams.data + } +} +``` +```html + + +``` + +**New** + +```js +// home.page.ts +const modal = await modalCtrl.create({ + component: NavComponent, + componentProps: { + rootParams: { + foo: 'hello', + bar: 'goodbye' + } + } +}); +``` + +```js +// nav.component.ts +@Input() rootParams = {}; +``` +```html + + +``` \ No newline at end of file diff --git a/packages/angular/common/src/directives/navigation/nav-params.ts b/packages/angular/common/src/directives/navigation/nav-params.ts deleted file mode 100644 index a5af4b9d631..00000000000 --- a/packages/angular/common/src/directives/navigation/nav-params.ts +++ /dev/null @@ -1,43 +0,0 @@ -/** - * @description - * NavParams are an object that exists on a page and can contain data for that particular view. - * Similar to how data was pass to a view in V1 with `$stateParams`, NavParams offer a much more flexible - * option with a simple `get` method. - * - * @usage - * ```ts - * import { NavParams } from '@ionic/angular'; - * - * export class MyClass{ - * - * constructor(navParams: NavParams){ - * // userParams is an object we have in our nav-parameters - * navParams.get('userParams'); - * } - * - * } - * ``` - */ -export class NavParams { - constructor(public data: { [key: string]: any } = {}) {} - - /** - * Get the value of a nav-parameter for the current view - * - * ```ts - * import { NavParams } from 'ionic-angular'; - * - * export class MyClass{ - * constructor(public navParams: NavParams){ - * // userParams is an object we have in our nav-parameters - * this.navParams.get('userParams'); - * } - * } - * ``` - * - * @param param Which param you want to look up - */ - get(param: string): T { - return this.data[param]; - } -} diff --git a/packages/angular/common/src/index.ts b/packages/angular/common/src/index.ts index 6e5c909acf3..7c8a8bceb79 100644 --- a/packages/angular/common/src/index.ts +++ b/packages/angular/common/src/index.ts @@ -10,8 +10,6 @@ export { bindLifecycleEvents, AngularDelegate } from './providers/angular-delega export type { IonicWindow } from './types/interfaces'; export type { ViewWillEnter, ViewWillLeave, ViewDidEnter, ViewDidLeave } from './types/ionic-lifecycle-hooks'; -export { NavParams } from './directives/navigation/nav-params'; - export { IonPopover } from './overlays/popover'; export { IonModal } from './overlays/modal'; diff --git a/packages/angular/common/src/providers/angular-delegate.ts b/packages/angular/common/src/providers/angular-delegate.ts index c9efeb83319..0e51a197b81 100644 --- a/packages/angular/common/src/providers/angular-delegate.ts +++ b/packages/angular/common/src/providers/angular-delegate.ts @@ -6,7 +6,6 @@ import { EnvironmentInjector, inject, createComponent, - InjectionToken, ComponentRef, } from '@angular/core'; import { @@ -18,8 +17,6 @@ import { LIFECYCLE_WILL_UNLOAD, } from '@ionic/core/components'; -import { NavParams } from '../directives/navigation/nav-params'; - // TODO(FW-2827): types @Injectable() @@ -123,26 +120,9 @@ export const attachView = ( cssClasses: string[] | undefined, elementReferenceKey: string | undefined ): any => { - /** - * Wraps the injector with a custom injector that - * provides NavParams to the component. - * - * NavParams is a legacy feature from Ionic v3 that allows - * Angular developers to provide data to a component - * and access it by providing NavParams as a dependency - * in the constructor. - * - * The modern approach is to access the data directly - * from the component's class instance. - */ - const childInjector = Injector.create({ - providers: getProviders(params), - parent: injector, - }); - const componentRef = createComponent(component, { environmentInjector, - elementInjector: childInjector, + elementInjector: injector, }); const instance = componentRef.instance; @@ -230,23 +210,3 @@ export const bindLifecycleEvents = (zone: NgZone, instance: any, element: HTMLEl return () => unregisters.forEach((fn) => fn()); }); }; - -const NavParamsToken = new InjectionToken('NavParamsToken'); - -const getProviders = (params: { [key: string]: any }) => { - return [ - { - provide: NavParamsToken, - useValue: params, - }, - { - provide: NavParams, - useFactory: provideNavParamsInjectable, - deps: [NavParamsToken], - }, - ]; -}; - -const provideNavParamsInjectable = (params: { [key: string]: any }) => { - return new NavParams(params); -}; diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts index da4a6c549c0..8096030ef63 100644 --- a/packages/angular/src/index.ts +++ b/packages/angular/src/index.ts @@ -24,7 +24,6 @@ export { Config, Platform, AngularDelegate, - NavParams, IonicRouteStrategy, ViewWillEnter, ViewWillLeave, diff --git a/packages/angular/standalone/src/index.ts b/packages/angular/standalone/src/index.ts index 741fef2831f..a47da34dc10 100644 --- a/packages/angular/standalone/src/index.ts +++ b/packages/angular/standalone/src/index.ts @@ -20,7 +20,6 @@ export { NavController, Config, Platform, - NavParams, IonicRouteStrategy, ViewWillEnter, ViewDidEnter,