refactor: use createComponent instead of componentFactoryResolver and…

… update docs
worktile · Nov 29, 2022 · 9bedac7 · 9bedac7
1 parent 7afe6e8
commit 9bedac7
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -220,20 +220,46 @@ export class AppModule {
         this.planetComponentLoader.register([{ name: 'app1-project-list', component: App1ProjectListComponent }]);
     }
 }
+```
 
-// in other apps
+Load `app1-project-list` component of app1 in other app via `PlanetComponentOutlet`
+
+```html
+<ng-container *planetComponentOutlet="'app1-project-list'; app: 'app1'; initialState: { search: 'xxx' }"></ng-container>
+
+// or 
+<ng-container planetComponentOutlet="app1-project-list"
+              planetComponentOutletApp="app1"
+              [planetComponentOutletInitialState]="{ term: 'xxx' }"
+              (planetComponentLoaded)="planetComponentLoaded($event)">
+</ng-container>
+```
+
+Load `app1-project-list` component of app1 in other app via `PlanetComponentLoader`, must be call `dispose`
+
+```ts
+@Component({
+  ...
+})
 export class OneComponent {
+    private componentRef: PlanetComponentRef;
+
     constructor(private planetComponentLoader: PlanetComponentLoader) {
     }
 
     openDetail() {
         this.planetComponentLoader.load('app1', 'app1-project-list', {
             container: this.containerElementRef,
             initialState: {}
+        }).subscribe((componentRef) => { 
+            this.componentRef = componentRef;
         });
     }
-}
 
+    ngOnDestroy() {
+       this.componentRef?.dispose();
+    }
+}
 ```
 
 ## FAQ

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -213,20 +213,45 @@ export class AppModule {
         this.planetComponentLoader.register([{ name: 'app1-project-list', component: App1ProjectListComponent }]);
     }
 }
+```
+通过`PlanetComponentOutlet`渲染`app1`的`app1-project-list`组件
 
-// in other apps
+```html
+<ng-container *planetComponentOutlet="'app1-project-list'; app: 'app1'; initialState: { search: 'xxx' }"></ng-container>
+
+// or 
+<ng-container planetComponentOutlet="app1-project-list"
+              planetComponentOutletApp="app1"
+              [planetComponentOutletInitialState]="{ term: 'xxx' }"
+              (planetComponentLoaded)="planetComponentLoaded($event)">
+</ng-container>
+```
+
+通过`PlanetComponentLoader`渲染`app1`的`app1-project-list`组件，记得要`dispose`销毁。
+
+```ts
+@Component({
+  ...
+})
 export class OneComponent {
+    private componentRef: PlanetComponentRef;
+
     constructor(private planetComponentLoader: PlanetComponentLoader) {
     }
 
     openDetail() {
         this.planetComponentLoader.load('app1', 'app1-project-list', {
             container: this.containerElementRef,
             initialState: {}
+        }).subscribe((componentRef) => { 
+            this.componentRef = componentRef;
         });
     }
-}
 
+    ngOnDestroy() {
+       this.componentRef?.dispose();
+    }
+}
 ```
 
 ## FAQ

diff --git a/examples/app1/src/app/projects/projects.component.ts b/examples/app1/src/app/projects/projects.component.ts
@@ -19,6 +19,7 @@ import { takeUntil } from 'rxjs/operators';
                     <!-- <ng-container
                         planetComponentOutlet="project1"
                         planetComponentOutletApp="app2"
+                        [planetComponentOutletInitialState]="{ search: 'From PlanetComponentOutlet' }"
                         (planetComponentLoaded)="planetComponentLoaded($event)"
                     ></ng-container> -->
                 </thy-tab>

diff --git a/packages/planet/src/component/planet-component-loader.ts b/packages/planet/src/component/planet-component-loader.ts
@@ -112,12 +112,13 @@ export class PlanetComponentLoader {
         config: PlantComponentConfig
     ): PlanetComponentRef<TData> {
         const plantComponentRef = new PlanetComponentRef();
-        const componentFactoryResolver = appModuleRef.componentFactoryResolver;
         const appRef = this.applicationRef;
         const injector = this.createInjector<TData>(appModuleRef, plantComponentRef);
         const container = this.getContainerElement(config);
-        const componentFactory = componentFactoryResolver.resolveComponentFactory(plantComponent.component);
-        const componentRef = componentFactory.create(injector);
+        const componentRef = createComponent(plantComponent.component, {
+            environmentInjector: appModuleRef.injector,
+            elementInjector: injector
+        });
         appRef.attachView(componentRef.hostView);
         const componentRootNode = this.getComponentRootNode(componentRef);
         this.insertComponentRootNodeToContainer(container, componentRootNode, config.hostClass || config.wrapperClass);