Merge pull request #39 from worktile/why520crazy/switch-sub-app-flicker

portal route change out ngZone when sub app route trigger change fix flicker when switch router in sub app
worktile · Oct 10, 2019 · d450349 · d450349
2 parents 9703660 + c2a5a66
commit d450349
Show file tree

Hide file tree

Showing 22 changed files with 234 additions and 61 deletions.
diff --git a/examples/app2/src/app/app.module.ts b/examples/app2/src/app/app.module.ts
@@ -12,6 +12,9 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { PlanetComponentLoader, EmptyComponent, NgxPlanetModule } from 'ngx-planet';
 import { DemoCommonModule } from '@demo/common';
+import { ProjectResolver } from './projects/project.resolver';
+import { TasksComponent } from './projects/tasks/tasks.component';
+import { ViewComponent } from './projects/view/view.component';
 
 const routers: Route[] = [
     {
@@ -27,6 +30,25 @@ const routers: Route[] = [
                 path: 'projects',
                 component: ProjectListComponent
             },
+            {
+                path: 'projects/:id',
+                component: ProjectDetailComponent,
+                resolve: {
+                    project: ProjectResolver
+                },
+                children: [
+                    {
+                        path: 'tasks',
+                        component: TasksComponent,
+                        children: [
+                            {
+                                path: ':viewId',
+                                component: ViewComponent
+                            }
+                        ]
+                    }
+                ]
+            },
             {
                 path: 'dashboard',
                 component: DashboardComponent
@@ -40,7 +62,15 @@ const routers: Route[] = [
 ];
 
 @NgModule({
-    declarations: [AppComponent, AppRootComponent, ProjectListComponent, DashboardComponent, ProjectDetailComponent],
+    declarations: [
+        AppComponent,
+        AppRootComponent,
+        ProjectListComponent,
+        DashboardComponent,
+        ProjectDetailComponent,
+        TasksComponent,
+        ViewComponent
+    ],
     entryComponents: [AppComponent, ProjectDetailComponent],
     imports: [
         CommonModule,

diff --git a/examples/app2/src/app/dashboard/dashboard.component.html b/examples/app2/src/app/dashboard/dashboard.component.html
@@ -1,10 +1,12 @@
-<h4>This is app2's dashboard</h4>
+<thy-content>
+  <h4>This is app2's dashboard</h4>
 
-<section-card class="mt-3" title="Links to about">
-  <div><a href="javascript:;" (click)="toAbout()">About</a></div>
-  <a><a href="javascript:;" [routerLink]="['/about']">About use routerLink</a></a>
-</section-card>
+  <section-card class="mt-3" title="Links to about">
+    <div><a href="javascript:;" (click)="toAbout()">About</a></div>
+    <a><a href="javascript:;" [routerLink]="['/about']">About use routerLink</a></a>
+  </section-card>
 
-<section-card class="mt-4" title="Open app1's user detail">
-  <button thyButton="outline-primary-square" (click)="openApp1UserDetail()">Open user detail (id: 1)</button>
-</section-card>
+  <section-card class="mt-4" title="Open app1's user detail">
+    <button thyButton="outline-primary-square" (click)="openApp1UserDetail()">Open user detail (id: 1)</button>
+  </section-card>
+</thy-content>
diff --git a/examples/app2/src/app/dashboard/dashboard.component.ts b/examples/app2/src/app/dashboard/dashboard.component.ts
@@ -1,4 +1,4 @@
-import { Component, Inject } from '@angular/core';
+import { Component, Inject, HostBinding } from '@angular/core';
 import { Router } from '@angular/router';
 import { PlanetPortalApplication, GlobalEventDispatcher } from 'ngx-planet';
 
@@ -7,6 +7,8 @@ import { PlanetPortalApplication, GlobalEventDispatcher } from 'ngx-planet';
     templateUrl: './dashboard.component.html'
 })
 export class DashboardComponent {
+    @HostBinding('class') class = 'thy-layout';
+
     constructor(private portalApp: PlanetPortalApplication, private globalEventDispatcher: GlobalEventDispatcher) {}
 
     toAbout() {

diff --git a/examples/app2/src/app/projects/detail/detail.component.html b/examples/app2/src/app/projects/detail/detail.component.html
@@ -1,4 +1,16 @@
-<thy-dialog-header thyTitle="项目详情"> </thy-dialog-header>
-<div class="dialog-body">
-    This is project detail!
-</div>
+<thy-header thyHasBorder="true">
+  <ng-template #headerTitle>
+    <!-- <thy-icon class="prefix-icon" thyIconName="house-square" thyIconType="fill"></thy-icon> -->
+    <!-- <a href="javascript:;" class="title-name">Project Detail {{ projectId }} </a> -->
+    <span>Project Detail {{ projectId }}</span>
+  </ng-template>
+  <ng-template #headerContent>
+    <thy-nav thyType="primary" thyHorizontal="center">
+      <a href="javascript:;" thyNavLink thyNavLinkActive="true">Tasks</a>
+      <a href="javascript:;" thyNavLink>Defects</a>
+    </thy-nav>
+  </ng-template>
+</thy-header>
+<thy-layout>
+  <router-outlet></router-outlet>
+</thy-layout>
diff --git a/examples/app2/src/app/projects/detail/detail.component.ts b/examples/app2/src/app/projects/detail/detail.component.ts
@@ -1,11 +1,21 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
-    selector: 'app2-detail',
+    selector: 'app2-project-detail',
     templateUrl: './detail.component.html'
 })
 export class ProjectDetailComponent implements OnInit {
-    constructor() {}
+    @HostBinding('class') class = 'thy-layout';
+
+    projectId: string;
+
+    constructor(private route: ActivatedRoute, router: Router) {
+        this.route.paramMap.subscribe(params => {
+            this.projectId = params.get('id');
+            router.navigateByUrl(`/app2/projects/${this.projectId}/tasks`);
+        });
+    }
 
     ngOnInit() {}
 }
diff --git a/examples/app2/src/app/projects/project-list.component.html b/examples/app2/src/app/projects/project-list.component.html
@@ -1,27 +1,29 @@
-<input
+<thy-content>
+  <input
     thyInput
     class="mt-2 mb-2"
     [(ngModel)]="search"
     placeholder="搜索项目"
     [style.width.px]="300"
     (thyEnter)="getProjects()"
-/>
-<thy-grid
+  />
+  <thy-grid
     thyClassName="table-hover"
     [thyModel]="projects"
     [thyLoadingDone]="loadingDone"
-    (thyOnRowClick)="openDetail()"
+    (thyOnRowClick)="openDetail($event)"
     thyTheme="bordered"
     thyRowKey="id"
->
+  >
     <thy-grid-column thyTitle="名称" thyModelKey="name"></thy-grid-column>
     <thy-grid-column thyTitle="描述" thyModelKey="desc"></thy-grid-column>
     <thy-grid-column thyTitle="操作" thyClassName="thy-operation-links text-center">
-        <ng-template #cell let-row>
-            <a href="javascript:;">设置</a>
-            <a class="link-secondary" href="javascript:;">
-                <i class="wtf wtf-trash-o"></i>
-            </a>
-        </ng-template>
+      <ng-template #cell let-row>
+        <a href="javascript:;">设置</a>
+        <a class="link-secondary" href="javascript:;">
+          <i class="wtf wtf-trash-o"></i>
+        </a>
+      </ng-template>
     </thy-grid-column>
-</thy-grid>
+  </thy-grid>
+</thy-content>
diff --git a/examples/app2/src/app/projects/project-list.component.ts b/examples/app2/src/app/projects/project-list.component.ts
@@ -1,15 +1,20 @@
-import { Component, EventEmitter, OnInit, DoCheck, ApplicationRef } from '@angular/core';
+import { Component, EventEmitter, OnInit, DoCheck, ApplicationRef, HostBinding } from '@angular/core';
 import { GlobalEventDispatcher } from 'ngx-planet';
 import { ProjectService } from './projects.service';
 import { ThyDialog } from 'ngx-tethys/dialog/dialog.service';
 import { ProjectDetailComponent } from './detail/detail.component';
+import { Router } from '@angular/router';
+import { ThyGridRowEvent } from 'ngx-tethys/grid';
 
 @Component({
     selector: 'app-project-list',
     templateUrl: './project-list.component.html'
 })
 export class ProjectListComponent implements OnInit, DoCheck {
+    @HostBinding('class') class = 'thy-layout';
+
     constructor(
+        private router: Router,
         private globalEventDispatcher: GlobalEventDispatcher,
         private projectService: ProjectService,
         private dialog: ThyDialog,
@@ -36,14 +41,15 @@ export class ProjectListComponent implements OnInit, DoCheck {
         }, 500);
     }
 
-    openDetail() {
-        this.dialog.open(ProjectDetailComponent, {
-            hasBackdrop: true,
-            backdropClosable: true,
-            closeOnNavigation: true
-        });
+    openDetail(event: ThyGridRowEvent) {
+        this.router.navigateByUrl(`/app2/projects/${event.row.id}`);
+        // this.dialog.open(ProjectDetailComponent, {
+        //     hasBackdrop: true,
+        //     backdropClosable: true,
+        //     closeOnNavigation: true
+        // });
 
-        this.click.emit();
+        // this.click.emit();
     }
 
     ngDoCheck() {

diff --git a/examples/app2/src/app/projects/project.resolver.ts b/examples/app2/src/app/projects/project.resolver.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { Resolve, Router, ActivatedRouteSnapshot } from '@angular/router';
+import { ProjectService } from './projects.service';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class ProjectResolver implements Resolve<any> {
+    constructor(private projectService: ProjectService, private router: Router) {}
+
+    resolve(route: ActivatedRouteSnapshot) {
+        const projectId = route.params.id;
+        return this.projectService.fetchProject(projectId);
+    }
+}
diff --git a/examples/app2/src/app/projects/projects.service.ts b/examples/app2/src/app/projects/projects.service.ts
@@ -1,4 +1,6 @@
 import { Injectable } from '@angular/core';
+import { of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 @Injectable({
     providedIn: 'root'
@@ -15,4 +17,12 @@ export class ProjectService {
             };
         });
     }
+
+    fetchProject(projectId: string) {
+        return of({
+            id: projectId,
+            name: `Data ${projectId}`,
+            desc: 'This is test data'
+        }).pipe(delay(100));
+    }
 }
diff --git a/examples/app2/src/app/projects/tasks/tasks.component.html b/examples/app2/src/app/projects/tasks/tasks.component.html
@@ -0,0 +1,10 @@
+<thy-header thySize="sm">
+  <ng-template #headerContent>
+    <thy-nav thyType="thirdly" thyHorizontal="left">
+      <a thyNavLink [routerLink]="['./view-1']" routerLinkActive="active">View1</a>
+      <a thyNavLink [routerLink]="['./view-2']" routerLinkActive="active">View2</a>
+      <a thyNavLink [routerLink]="['./view-3']" routerLinkActive="active">View3</a>
+    </thy-nav>
+  </ng-template>
+</thy-header>
+<router-outlet></router-outlet>
diff --git a/examples/app2/src/app/projects/tasks/tasks.component.ts b/examples/app2/src/app/projects/tasks/tasks.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'app2-tasks',
+    templateUrl: './tasks.component.html'
+})
+export class TasksComponent implements OnInit {
+    @HostBinding('class') class = 'thy-layout';
+
+    constructor(router: Router, route: ActivatedRoute) {
+        router.navigate(['./view-1'], { relativeTo: route });
+    }
+
+    ngOnInit(): void {}
+}
diff --git a/examples/app2/src/app/projects/view/view.component.html b/examples/app2/src/app/projects/view/view.component.html
@@ -0,0 +1 @@
+viewId: {{ viewId }}
diff --git a/examples/app2/src/app/projects/view/view.component.ts b/examples/app2/src/app/projects/view/view.component.ts
@@ -0,0 +1,20 @@
+import { Component, OnInit, HostBinding } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+    selector: 'app2-view',
+    templateUrl: './view.component.html'
+})
+export class ViewComponent implements OnInit {
+    @HostBinding('class') class = 'thy-layout-content';
+
+    viewId: string;
+
+    constructor(private route: ActivatedRoute) {
+        route.paramMap.subscribe(param => {
+            this.viewId = param.get('viewId');
+        });
+    }
+
+    ngOnInit(): void {}
+}
diff --git a/examples/app2/src/app/root/root.component.html b/examples/app2/src/app/root/root.component.html
@@ -10,5 +10,5 @@
       </thy-menu>
     </div>
   </thy-sidebar>
-  <thy-content> <router-outlet></router-outlet> </thy-content>
+  <router-outlet></router-outlet>
 </thy-layout>
diff --git a/examples/app2/tslint.json b/examples/app2/tslint.json
@@ -1,17 +1,7 @@
 {
-    "extends": "../../tslint.json",
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
-    }
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app2", "kebab-case"]
+  }
 }
diff --git a/examples/portal/src/app/app-routing.module.ts b/examples/portal/src/app/app-routing.module.ts
@@ -1,7 +1,6 @@
 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 { SettingsComponent } from './settings/settings.component';
 import { EmptyComponent } from 'ngx-planet';
 

diff --git a/examples/portal/src/app/app.component.scss b/examples/portal/src/app/app.component.scss
@@ -1,8 +1,9 @@
 $app-nav-width: 70px;
+$app-nav-bg-color: #48525c;
 
 .app-nav {
     width: $app-nav-width;
-    background: #48525c;
+    background: $app-nav-bg-color;
 
     .logo {
         height: 50px;