fix(app-loader): should not circulate redirect apps

start load multiple at the same time, it may circulate navigate in multiple apps

Author: why520crazy

Diff for: examples/portal/src/app/app-routing.module.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AboutComponent } from './about/about.component';
 import { HostContainerComponent } from './host-container/host-container.component';
-import { HelpComponent } from './help/help.component';
+import { SettingsComponent } from './settings/settings.component';
 
 const routes: Routes = [
     {
@@ -15,8 +15,8 @@ const routes: Routes = [
         component: AboutComponent
     },
     {
-        path: 'help',
-        component: HelpComponent
+        path: 'settings',
+        component: SettingsComponent
     },
     {
         path: 'app1',
@@ -51,7 +51,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-    imports: [RouterModule.forRoot(routes)],
+    imports: [RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' })],
     exports: [RouterModule]
 })
 export class AppRoutingModule {}

Diff for: examples/portal/src/app/app.component.html

@@ -2,10 +2,31 @@
   <thy-sidebar class="app-nav">
     <img class="logo" src="/assets/images/logo.svg" />
     <thy-nav [thyVertical]="'true'" class="mt-2" [thyType]="'primary'">
-      <a thyNavLink [routerLink]="['/app1']" routerLinkActive="active">App1</a>
-      <a thyNavLink [routerLink]="['/app2']" routerLinkActive="active">App2</a>
-      <a thyNavLink [routerLink]="['/about']" routerLinkActive="active">About</a>
-      <!-- <a thyNavLink [routerLink]="['/help']" routerLinkActive="active">Help</a> -->
+      <a
+        thyNavLink
+        thyTooltip="App1"
+        thyTooltipPlacement="right"
+        [routerLink]="['/app1']"
+        routerLinkActive="active"
+        thyTooltip="App1"
+        thyTooltipPlacement="right"
+      >
+        <thy-icon thyIconName="application"></thy-icon>
+      </a>
+      <a thyNavLink [routerLink]="['/app2']" routerLinkActive="active" thyTooltip="App2" thyTooltipPlacement="right">
+        <thy-icon thyIconName="app-agile"></thy-icon>
+      </a>
+      <a thyNavLink [routerLink]="['/about']" routerLinkActive="active" thyTooltip="About" thyTooltipPlacement="right">
+        <thy-icon thyIconName="smile"></thy-icon>
+      </a>
+      <a
+        thyNavLink
+        [routerLink]="['/settings']"
+        routerLinkActive="active"
+        thyTooltip="Settings"
+        thyTooltipPlacement="right"
+        ><thy-icon thyIconName="settings"></thy-icon
+      ></a>
     </thy-nav>
   </thy-sidebar>
   <router-outlet></router-outlet>

Diff for: examples/portal/src/app/app.component.scss

@@ -17,16 +17,27 @@ $app-nav-width: 70px;
         opacity: 0.8;
         min-width: $app-nav-width;
         color: $white;
+        height: $app-nav-width;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        .thy-icon {
+            color: $white;
+            font-size: $font-size-xlg;
+        }
         &.active,
         &:hover {
             background: rgb(57, 65, 76);
             color: $white;
+            .thy-icon {
+                color: $white;
+            }
         }
     }
 
-    .thy-nav--vertical {
-        .nav-link {
-            border-left-width: 4px;
-        }
-    }
+    // .thy-nav--vertical {
+    //     .nav-link {
+    //         border-left-width: 0px;
+    //     }
+    // }
 }

Diff for: examples/portal/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnInit, ChangeDetectorRef, ApplicationRef, NgZone } from '@angular/core';
 import { Planet, SwitchModes, GlobalEventDispatcher, ApplicationStatus, PlanetApplication } from 'ngx-planet';
-import { Router, NavigationEnd, RouterEvent } from '@angular/router';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
 import { ThyDialog } from 'ngx-tethys/dialog';
 import { ADetailComponent } from './a-detail/a-detail.component';
 import { ThyConfirmService, ThyNotifyService } from 'ngx-tethys';
@@ -20,6 +20,8 @@ export class AppComponent implements OnInit {
     }
 
     constructor(
+        private router: Router,
+        private route: ActivatedRoute,
         private planet: Planet,
         private globalEventDispatcher: GlobalEventDispatcher,
         private thyDialog: ThyDialog,

Diff for: examples/portal/src/app/app.module.ts

@@ -1,4 +1,4 @@
-import { BrowserModule } from '@angular/platform-browser';
+import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppRoutingModule } from './app-routing.module';
@@ -7,16 +7,20 @@ import { NgxTethysModule } from 'ngx-tethys';
 import { AboutComponent } from './about/about.component';
 import { HostContainerComponent } from './host-container/host-container.component';
 import { NgxPlanetModule } from 'ngx-planet';
-import { ThyDialogModule } from 'ngx-tethys/dialog';
+import { ThyDialogModule, ThyIconRegistry } from 'ngx-tethys';
 import { ADetailComponent } from './a-detail/a-detail.component';
-import { HelpComponent } from './help/help.component';
+import { SettingsComponent } from './settings/settings.component';
 import { AppRootContext, DemoCommonModule } from '@demo/common';
 
 @NgModule({
-    declarations: [AppComponent, AboutComponent, HelpComponent, HostContainerComponent, ADetailComponent],
+    declarations: [AppComponent, AboutComponent, SettingsComponent, HostContainerComponent, ADetailComponent],
     imports: [BrowserModule, NgxTethysModule, ThyDialogModule, AppRoutingModule, NgxPlanetModule, DemoCommonModule],
     providers: [AppRootContext],
     bootstrap: [AppComponent],
     entryComponents: [ADetailComponent]
 })
-export class AppModule {}
+export class AppModule {
+    constructor(iconRegistry: ThyIconRegistry, domSanitizer: DomSanitizer) {
+        iconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/sprite.defs.svg'));
+    }
+}

Diff for: examples/portal/src/app/help/help.component.html

@@ -0,0 +1,3 @@
+<section-card title="Settings">
+  <label thyCheckbox name="Preload">App1 Preload</label>
+</section-card>

Diff for: examples/portal/src/app/settings/settings.component.html

@@ -5,11 +5,11 @@ import { ADetailComponent } from '../a-detail/a-detail.component';
 import { AppRootContext } from '@demo/common';
 
 @Component({
-    selector: 'app-help',
-    templateUrl: './help.component.html',
-    styleUrls: ['./help.component.scss']
+    selector: 'app-settings',
+    templateUrl: './settings.component.html',
+    styleUrls: ['./settings.component.scss']
 })
-export class HelpComponent implements OnInit {
+export class SettingsComponent implements OnInit {
     @HostBinding(`class.thy-layout-content`) isThyLayoutContent = true;
 
     constructor(private router: Router, private thyDialog: ThyDialog, public appRootContext: AppRootContext) {}