fix(app-loader): should navigate when reroute active app #267024

worktile · Oct 9, 2019 · 34bdc1a · 34bdc1a
1 parent 0fb9aae
commit 34bdc1a
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 2 deletions.
diff --git a/examples/portal/src/app/app.component.html b/examples/portal/src/app/app.component.html
@@ -5,7 +5,6 @@
       <a
         thyNavLink
         thyTooltip="App1"
-        thyTooltipPlacement="right"
         [routerLink]="['/app1']"
         routerLinkActive="active"
         thyTooltip="App1"
@@ -27,6 +26,32 @@
         thyTooltipPlacement="right"
         ><thy-icon thyIconName="settings"></thy-icon
       ></a>
+      <a
+        thyNavLink
+        href="javascript:;"
+        [thyPopover]="more"
+        thyPlacement="right"
+        thyTooltip="More"
+        thyTooltipPlacement="right"
+      >
+        <thy-icon thyIconName="more"></thy-icon>
+      </a>
+      <ng-template #more>
+        <thy-action-menu>
+          <a thyActionMenuItem routerLinkActive="active" [routerLink]="['/app1/dashboard']">
+            <span thyActionMenuItemIcon>
+              <thy-icon thyIconName="house"></thy-icon>
+            </span>
+            <span thyActionMenuItemName>To App1's dashboard</span>
+          </a>
+          <a thyActionMenuItem routerLinkActive="active" [routerLink]="['/app1/users']">
+            <span thyActionMenuItemIcon>
+              <thy-icon thyIconName="user-group"></thy-icon>
+            </span>
+            <span thyActionMenuItemName>To App1's users</span>
+          </a>
+        </thy-action-menu>
+      </ng-template>
     </thy-nav>
   </thy-sidebar>
   <router-outlet></router-outlet>

diff --git a/examples/portal/src/app/settings/settings.component.html b/examples/portal/src/app/settings/settings.component.html
@@ -1,3 +1,4 @@
 <section-card title="Settings">
-  <label thyCheckbox name="Preload">App1 Preload</label>
+  <label thyCheckbox name="app1-preload" thyLabelText="App1 Preload"></label>
+  <label thyCheckbox name="app2-preload" thyLabelText="App2 Preload"></label>
 </section-card>
diff --git a/packages/planet/src/application/planet-application-loader.spec.ts b/packages/planet/src/application/planet-application-loader.spec.ts
@@ -49,6 +49,8 @@ class PlanetApplicationRefFaker {
     planetAppRef: PlanetApplicationRef;
     destroySpy: jasmine.Spy;
     bootstrapSpy: jasmine.Spy;
+    navigateByUrlSpy: jasmine.Spy;
+
     bootstrap$: Subject<PlanetApplicationRef>;
 
     constructor(appName: string) {
@@ -57,6 +59,7 @@ class PlanetApplicationRefFaker {
         this.bootstrap$ = new Subject<PlanetApplicationRef>();
         this.bootstrapSpy.and.returnValues(this.bootstrap$, this.bootstrap$);
         this.destroySpy = spyOn(this.planetAppRef, 'destroy');
+        this.navigateByUrlSpy = spyOn(this.planetAppRef, 'navigateByUrl');
         (window as any).planet.apps[appName] = this.planetAppRef;
     }
 
@@ -211,6 +214,33 @@ describe('PlanetApplicationLoader', () => {
         tick();
     }));
 
+    it(`should call app1 navigateByUrl when app1 is active`, fakeAsync(() => {
+        const loadAppAssets$ = new Subject();
+        const assetsLoaderSpy = spyOn(assetsLoader, 'loadAppAssets');
+        assetsLoaderSpy.and.returnValue(loadAppAssets$);
+
+        const appStatusChangeFaker = AppStatusChangeFaker.create(planetApplicationLoader);
+        const app1RefFaker = PlanetApplicationRefFaker.create(app1.name);
+
+        planetApplicationLoader.reroute({ url: '/app1/dashboard' });
+        loadAppAssets$.next();
+        loadAppAssets$.complete();
+        flush();
+        app1RefFaker.haveBeenBootstrap();
+        app1RefFaker.bootstrap$.next();
+
+        // 判断是否在宿主元素中创建了应用根节点
+        expectApp1Element();
+
+        expect(appStatusChangeFaker.spy).toHaveBeenCalledTimes(5);
+        expect(app1RefFaker.navigateByUrlSpy).not.toHaveBeenCalled();
+        planetApplicationLoader.reroute({ url: '/app1/dashboard2' });
+        flush();
+        expect(app1RefFaker.navigateByUrlSpy).toHaveBeenCalledTimes(1);
+        expect(app1RefFaker.navigateByUrlSpy).toHaveBeenCalledWith('/app1/dashboard2');
+        tick();
+    }));
+
     it(`should start load app1 once when reroute same url: /app1/dashboard`, fakeAsync(() => {
         const loadAppAssets$ = new Subject();
         const assetsLoaderSpy = spyOn(assetsLoader, 'loadAppAssets');

diff --git a/packages/planet/src/application/planet-application-loader.ts b/packages/planet/src/application/planet-application-loader.ts
@@ -189,6 +189,14 @@ export class PlanetApplicationLoader {
                                         )
                                     );
                                 } else if (appStatus === ApplicationStatus.active) {
+                                    apps$.push(
+                                        of(app).pipe(
+                                            tap(() => {
+                                                const appRef = getPlanetApplicationRef(app.name);
+                                                appRef.navigateByUrl(event.url);
+                                            })
+                                        )
+                                    );
                                 } else {
                                     throw new Error(
                                         `app(${app.name})'s status is ${appStatus}, can't be show or bootstrap`
@@ -204,6 +212,7 @@ export class PlanetApplicationLoader {
                                     if (this.startRouteChangeEvent === event) {
                                         this.ngZone.runOutsideAngular(() => {
                                             forkJoin(apps$).subscribe(() => {
+                                                this.setLoadingDone();
                                                 this.ensurePreloadApps(apps);
                                             });
                                         });