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

fix(angular): do not create duplicate menuController instances (#28343)

Browse Source 
Issue number: resolves #28337

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Duplicate instances of `menuController` are being created in
`@ionic/angular`. `ion-menu` registers itself in the `menuController`
from `@ionic/core`, but the `MenuController` from `@ionic/angular` uses
the `menuController` from `@ionic/core/components`. This is how the
overlay providers work too. Normally, this is not a problem. However,
`menuController` caches references to registered menus in each
controller instances:
dcbf45101f/core/src/utils/menu-controller/index.ts (L14)

This means that since there are two different controllers,
`menuController` B does not know about the menus in `menuController` A.
The end result is that the menu controller used in developer
applications did not have references to the registered menus, which gave
the impression that the menu controller did not work.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updated the architecture of `MenuController` in Ionic Angular to
accept a `menuController` instance. This allows `@ionic/angular` to pass
the `menuController` from `@ionic/core` and for
`@ionic/angular/standalone` to pass the `menuController` from
`@ionic/core/components`.

Note: Overlay controllers don't **need** this change per-se since they
don't cache references to overlays internally (they just query the DOM).
However, I think it would be good to have a consistent architecture
here, so I'll put up a separate PR that makes this change for overlays
too.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

Dev build: `7.5.1-dev.11697123035.1ee6b4a2`

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Liam DeBeasi
2023-10-12 15:29:18 -04:00
committed by GitHub
parent 1ba9973857
commit fa78676d57
14 changed files with 157 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
packages/angular/test/base/src/app/lazy/providers/providers.component.html
View File

@ -1,39 +1,48 @@
<ion-menu menu-id="menu" content-id="content">
Menu Content
</ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>
Providers Test
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<p>
isLoaded: <span id="is-loaded">{{isLoaded}}</span>
</p>
<p>
isReady: <span id="is-ready">{{isReady}}</span>
</p>
<p>
isResumed: <span id="is-resumed">{{isResumed}}</span>
</p>
<p>
isPaused: <span id="is-paused">{{isPaused}}</span>
</p>
<p>
isResized: <span id="is-resized">{{isResized}}</span>
</p>
<p>
isTesting: <span id="is-testing">{{isTesting}}</span>
</p>
<p>
isDesktop: <span id="is-desktop">{{isDesktop}}</span>
</p>
<p>
isMobile: <span id="is-mobile">{{isMobile}}</span>
</p>
<p>
keyboardHeight: <span id="keyboard-height">{{keyboardHeight}}</span>
</p>
<p>
queryParams: <span id="query-params">{{queryParams}}</span>
</p>
</ion-content>
<ion-toolbar>
<ion-title>
Providers Test
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" id="content">
<p>
isLoaded: <span id="is-loaded">{{isLoaded}}</span>
</p>
<p>
isReady: <span id="is-ready">{{isReady}}</span>
</p>
<p>
isResumed: <span id="is-resumed">{{isResumed}}</span>
</p>
<p>
isPaused: <span id="is-paused">{{isPaused}}</span>
</p>
<p>
isResized: <span id="is-resized">{{isResized}}</span>
</p>
<p>
isTesting: <span id="is-testing">{{isTesting}}</span>
</p>
<p>
isDesktop: <span id="is-desktop">{{isDesktop}}</span>
</p>
<p>
isMobile: <span id="is-mobile">{{isMobile}}</span>
</p>
<p>
keyboardHeight: <span id="keyboard-height">{{keyboardHeight}}</span>
</p>
<p>
queryParams: <span id="query-params">{{queryParams}}</span>
</p>
<p>
Registered Menu Count: <span id="registered-menu-count">{{registeredMenuCount}}</span>
</p>
<button id="set-menu-count" (click)="setMenuCount()">Set Menu Count</button>
</ion-content>

8
packages/angular/test/base/src/app/lazy/providers/providers.component.ts
View File

@ -21,12 +21,13 @@ export class ProvidersComponent {
isMobile?: boolean = undefined;
keyboardHeight = 0;
queryParams = '';
registeredMenuCount = 0;
constructor(
actionSheetCtrl: ActionSheetController,
alertCtrl: AlertController,
loadingCtrl: LoadingController,
menuCtrl: MenuController,
private menuCtrl: MenuController,
pickerCtrl: PickerController,
modalCtrl: ModalController,
platform: Platform,
@ -82,4 +83,9 @@ export class ProvidersComponent {
window.dispatchEvent(new CustomEvent('resize'));
});
}
async setMenuCount() {
const menus = await this.menuCtrl.getMenus();
this.registeredMenuCount = menus.length;
}
}

1
packages/angular/test/base/src/app/standalone/app-standalone/app.routes.ts
View File

@ -6,6 +6,7 @@ export const routes: Routes = [
path: '',
component: AppComponent,
children: [
{ path: 'menu-controller', loadComponent: () => import('../menu-controller/menu-controller.component').then(c => c.MenuControllerComponent) },
{ path: 'popover', loadComponent: () => import('../popover/popover.component').then(c => c.PopoverComponent) },
{ path: 'modal', loadComponent: () => import('../modal/modal.component').then(c => c.ModalComponent) },
{ path: 'router-outlet', loadComponent: () => import('../router-outlet/router-outlet.component').then(c => c.RouterOutletComponent) },

10
packages/angular/test/base/src/app/standalone/menu-controller/menu-controller.component.html Normal file
View File

@ -0,0 +1,10 @@
<ion-menu menu-id="menu" content-id="content">
Menu Content
</ion-menu>
<ul id="content">
<li>Registered Menu Count: <span id="registered-menu-count">{{registeredMenuCount}}</span></li>
<button id="set-menu-count" (click)="setMenuCount()">Set Menu Count</button>
</ul>

19
packages/angular/test/base/src/app/standalone/menu-controller/menu-controller.component.ts Normal file
View File

@ -0,0 +1,19 @@
import { Component } from '@angular/core';
import { MenuController, IonMenu } from '@ionic/angular/standalone';
@Component({
selector: 'app-menu-controller',
templateUrl: './menu-controller.component.html',
standalone: true,
imports: [IonMenu]
})
export class MenuControllerComponent {
registeredMenuCount = 0;
constructor(private menuCtrl: MenuController) {}
async setMenuCount() {
const menus = await this.menuCtrl.getMenus();
this.registeredMenuCount = menus.length;
}
}