feat(component-loader): load compoent support preload appliction

examples/app1/src/app/app.module.ts

@@ -10,9 +10,10 @@ import { AppRootComponent } from './root/root.component';
 import { DemoCommonModule } from '@demo/common';
 import { NgxPlanetModule } from 'ngx-planet';
 import { UserModule } from './user/user.module';
+import { ProjectsComponent } from './projects/projects.component';
 
 @NgModule({
-    declarations: [AppComponent, AppRootComponent, DashboardComponent],
+    declarations: [AppComponent, AppRootComponent, DashboardComponent, ProjectsComponent],
     imports: [
         BrowserModule,
         RouterModule.forRoot(routers),

examples/app1/src/app/app.routing.ts

@@ -2,6 +2,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { Route } from '@angular/router';
 import { AppRootComponent } from './root/root.component';
 import { EmptyComponent } from 'ngx-planet';
+import { ProjectsComponent } from './projects/projects.component';
 
 export const routers: Route[] = [
     {
@@ -20,6 +21,10 @@ export const routers: Route[] = [
             {
                 path: 'users',
                 loadChildren: () => import('./user/user.module').then(mod => mod.UserModule)
+            },
+            {
+                path: 'projects',
+                component: ProjectsComponent
             }
             // {
             //     path: 'users',

examples/app1/src/app/dashboard/dashboard.component.html

@@ -17,8 +17,8 @@ <h5 class="red">count: {{ counter.count }}</h5>
 
 <section-card class="mt-4" title="Render app2's component">
   <div class="btn-pair">
-    <button thyButton="primary-square" (click)="openApp2Component()">Open App2 Project list</button>
-    <button thyButton="primary-square" (click)="disposeApp2Component()">Dispose App2 Project list</button>
+    <button thyButton="primary-square" (click)="openApp2Component()">Open App2 Projects</button>
+    <button thyButton="primary-square" (click)="disposeApp2Component()">Dispose App2 Projects</button>
   </div>
   <div #container></div>
 </section-card>

examples/app1/src/app/dashboard/dashboard.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, ViewChild, ElementRef } from '@angular/core';
+import { Component, Inject, ViewChild, ElementRef, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { CounterService } from '../counter.service';
 import { AppRootContext } from '@demo/common';
@@ -9,7 +9,7 @@ import { ThyDialog } from 'ngx-tethys';
     selector: 'app-dashboard',
     templateUrl: './dashboard.component.html'
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
     @ViewChild('container', { static: true }) containerElementRef: ElementRef<HTMLDivElement>;
 
     private componentRef: PlanetComponentRef;
@@ -24,15 +24,21 @@ export class DashboardComponent {
         private planetComponentLoader: PlanetComponentLoader
     ) {}
 
+    ngOnInit() {}
+
     openADetail() {
         this.globalEventDispatcher.dispatch('openADetail');
     }
 
     openApp2Component() {
-        this.componentRef = this.planetComponentLoader.load('app2', 'project1', {
-            container: this.containerElementRef,
-            initialState: {}
-        });
+        this.planetComponentLoader
+            .load('app2', 'project1', {
+                container: this.containerElementRef,
+                initialState: {}
+            })
+            .subscribe(componentRef => {
+                this.componentRef = componentRef;
+            });
     }
 
     disposeApp2Component() {

examples/app1/src/app/projects/projects.component.ts

@@ -0,0 +1,32 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { PlanetComponentLoader } from 'ngx-planet';
+
+@Component({
+    selector: 'app-projects',
+    template: `
+        <section-card class="mt-2" title="App2's projects component">
+            <thy-loading [thyDone]="loadingDone"></thy-loading>
+            <div #container></div>
+        </section-card>
+    `
+})
+export class ProjectsComponent implements OnInit {
+    @ViewChild('container', { static: true }) elementRef: ElementRef<HTMLDivElement>;
+
+    loadingDone = false;
+
+    constructor(private planetComponentLoader: PlanetComponentLoader) {}
+
+    ngOnInit() {
+        this.planetComponentLoader
+            .load('app2', 'project1', {
+                container: this.elementRef
+            })
+            .subscribe(componentRef => {
+                this.loadingDone = true;
+                componentRef.componentInstance.click.subscribe(() => {
+                    console.log('project item clicked');
+                });
+            });
+    }
+}

examples/app1/src/app/root/root.component.html

@@ -8,6 +8,7 @@
       <thy-menu>
         <a thyMenuItem [routerLink]="['/app1/dashboard']" routerLinkActive="active">App1 Dashboard</a>
         <a thyMenuItem [routerLink]="['/app1/users']" routerLinkActive="active">App1 Users</a>
+        <a thyMenuItem [routerLink]="['/app1/projects']" routerLinkActive="active">App2 Projects</a>
       </thy-menu>
     </div>
   </thy-sidebar>

examples/app2/src/app/projects/project-list.component.ts

@@ -43,13 +43,12 @@ export class ProjectListComponent implements OnInit, DoCheck {
 
     openDetail(event: ThyGridRowEvent) {
         this.router.navigateByUrl(`/app2/projects/${event.row.id}`);
+        this.click.emit();
         // this.dialog.open(ProjectDetailComponent, {
         //     hasBackdrop: true,
         //     backdropClosable: true,
         //     closeOnNavigation: true
         // });
-
-        // this.click.emit();
     }
 
     ngDoCheck() {

examples/portal/src/app/custom-settings.service.ts

@@ -20,7 +20,7 @@ const DEFAULT_SETTINGS: CustomSettingsInfo = {
         switchMode: SwitchModes.coexist
     },
     app2: {
-        preload: true,
+        preload: false,
         switchMode: SwitchModes.coexist
     }
 };