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

fix(angular): fix sibling router-outlets (#16774)

Browse Source 
fixes #16411
This commit is contained in:
Manu MA
2018-12-17 01:49:56 +01:00
committed by GitHub
parent b5efedeb1c
commit 35e3848d96
14 changed files with 113 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/navigation/ion-router-outlet.ts
View File

@ -62,13 +62,11 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
this.name = name || PRIMARY_OUTLET;
this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone);
parentContexts.onChildOutletCreated(this.name, this as any);
}
ngOnDestroy(): void {
console.log('router-outlet destroyed');
this.parentContexts.onChildOutletDestroyed(this.name);
this.stackCtrl.destroy();
}
getContext(): OutletContext | null {

7
angular/src/directives/navigation/stack-controller.ts
View File

@ -94,6 +94,13 @@ export class StackController {
return this.activeView ? this.activeView.stackId : undefined;
}
destroy() {
this.containerEl = undefined!;
this.views.forEach(destroyView);
this.activeView = undefined;
this.views = [];
}
private getStack(stackId: string | undefined) {
return this.views.filter(v => v.stackId === stackId);
}

23
angular/test/test-app/e2e/src/nested-outlet.e2e-spec.ts Normal file
View File

@ -0,0 +1,23 @@
import { browser, element, by } from 'protractor';
import { waitTime, handleErrorMessages, goBack } from './utils';
describe('nested-outlet', () => {
afterEach(() => {
handleErrorMessages();
});
it('should navigate correctly', async () => {
await browser.get('/nested-outlet/page');
expect(await element(by.css('ion-router-outlet ion-router-outlet app-nested-outlet-page h1')).getText()).toEqual('Nested page 1');
await element(by.css('#goto-tabs')).click();
await waitTime(500);
await element(by.css('#goto-nested-page1')).click();
await waitTime(500);
await element(by.css('#goto-nested-page2')).click();
await waitTime(500);
expect(await element(by.css('ion-router-outlet ion-router-outlet app-nested-outlet-page2 h1')).getText()).toEqual('Nested page 2');
});
});

4
angular/test/test-app/e2e/src/utils.ts
View File

@ -1,5 +1,9 @@
import { browser } from 'protractor';
export function goBack() {
return browser.executeScript(`return window.history.back()`);
}
export function getProperty(selector: string, property: string) {
return browser.executeScript(`
return document.querySelector('${selector}')['${property}'];

18
angular/test/test-app/src/app/app-routing.module.ts
View File

@ -11,6 +11,9 @@ import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.com
import { TabsTab2Component } from './tabs-tab2/tabs-tab2.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
const routes: Routes = [
{ path: '', component: HomePageComponent },
@ -20,7 +23,6 @@ const routes: Routes = [
{ path: 'router-link-page', component: RouterLinkPageComponent },
{ path: 'virtual-scroll', component: VirtualScrollComponent },
{ path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
{ path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
{
path: 'tabs',
@ -58,6 +60,20 @@ const routes: Routes = [
loadChildren: './tabs-lazy/tabs-lazy.module#TabsLazyModule'
}
]
},
{
path: 'nested-outlet',
component: NestedOutletComponent,
children: [
{
path: 'page',
component: NestedOutletPageComponent
},
{
path: 'page2',
component: NestedOutletPage2Component
}
]
}
];

8
angular/test/test-app/src/app/app.module.ts
View File

@ -18,6 +18,9 @@ import { TabsTab1NestedComponent } from './tabs-tab1-nested/tabs-tab1-nested.com
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scroll-inner.component';
import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
@NgModule({
declarations: [
@ -34,7 +37,10 @@ import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scro
TabsTab1NestedComponent,
VirtualScrollComponent,
VirtualScrollDetailComponent,
VirtualScrollInnerComponent
VirtualScrollInnerComponent,
NestedOutletComponent,
NestedOutletPageComponent,
NestedOutletPage2Component
],
imports: [
BrowserModule,

5
angular/test/test-app/src/app/home-page/home-page.component.html
View File

@ -32,5 +32,10 @@
Virtual Scroll
</ion-label>
</ion-item>
<ion-item routerLink="/nested-outlet/page">
<ion-label>
Nested ion-router-outlet
</ion-label>
</ion-item>
</ion-list>
</ion-content>

7
angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.html Normal file
View File

@ -0,0 +1,7 @@
<ion-content>
<h1>Nested page 1</h1>
<p>
<ion-button routerLink="/tabs" id="goto-tabs">Go To Tabs</ion-button>
<ion-button routerLink="/nested-outlet/page2" id="goto-nested-page2">Go To SECOND</ion-button>
</p>
</ion-content>

8
angular/test/test-app/src/app/nested-outlet-page/nested-outlet-page.component.ts Normal file
View File

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-nested-outlet-page',
templateUrl: './nested-outlet-page.component.html',
})
export class NestedOutletPageComponent {
}

6
angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.html Normal file
View File

@ -0,0 +1,6 @@
<ion-content>
<h1>Nested page 2</h1>
<p>
<ion-button routerLink="/nested-outlet/page">Go To FIRST</ion-button>
</p>
</ion-content>

8
angular/test/test-app/src/app/nested-outlet-page2/nested-outlet-page2.component.ts Normal file
View File

@ -0,0 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-nested-outlet-page2',
templateUrl: './nested-outlet-page2.component.html',
})
export class NestedOutletPage2Component {
}

10
angular/test/test-app/src/app/nested-outlet/nested-outlet.component.html Normal file
View File

@ -0,0 +1,10 @@
<ion-header>
<ion-toolbar>
<ion-title>
NESTED OUTLET
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>

9
angular/test/test-app/src/app/nested-outlet/nested-outlet.component.ts Normal file
View File

@ -0,0 +1,9 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-nested-outlet',
templateUrl: './nested-outlet.component.html',
})
export class NestedOutletComponent {
}

1
angular/test/test-app/src/app/tabs-tab1/tabs-tab1.component.html
View File

@ -9,5 +9,6 @@
<p>
<ion-button routerLink="/tabs/account/nested/12" id="goto-tab1-page2">Go to Page 2</ion-button>
<ion-button routerLink="/tabs/lazy/nested" id="goto-tab3-page2">Go to Tab 3 - Page 2</ion-button>
<ion-button routerLink="/nested-outlet/page" id="goto-nested-page1">Go to nested</ion-button>
</p>
</ion-content>