feat: x6-angular-shape support pass arguments (antvis#1250)

* feat: ✨ x6-angular-shape support pass arguments

* docs: 📚️ add demo about pass arguments

Author: Eve-Sama

packages/x6-angular-shape/README.md

@@ -16,6 +16,17 @@ $ yarn add @antv/x6-angular-shape
 
 ### Render component
 ```ts
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-node',
+  template: `<div>{{ title }}</div>`
+})
+export class NodeComponent {
+  @Input() title: string;
+}
+```
+```ts
 // other package from angular
 import '@antv/x6-angular-shape'
 
@@ -29,6 +40,13 @@ export class AppComponent {
   addAngularComponent(): void {
     Graph.registerAngularContent('demo-component', { injector: this.injector, content: NodeComponent });
     this.graph.addNode({
+      data: {
+        // You can pass data to the component, only if you wrap attribute with ngArguments
+        ngArguments: {
+          // Declare @Input() in the component, then it will be assignmented
+          title: 'Angular Component'
+        }
+      },
       x: 40,
       y: 40,
       width: 160,
@@ -42,8 +60,8 @@ export class AppComponent {
 
 ### Render templateRef
 ```html
-<ng-template #demoTpl>
-  <div>Angular Template</div>
+<ng-template #demoTpl let-data="ngArguments">
+  <div>{{ data.title }}</div>
 </ng-template>
 ```
 ```ts
@@ -60,13 +78,17 @@ export class AppComponent {
   addAngularTemplate(): void {
     Graph.registerAngularContent('demo-template', { injector: this.injector, content: this.demoTpl });
     this.graph.addNode({
+      data: {
+        ngArguments: {
+          title: 'Angular Template'
+        }
+      },
       x: 240,
       y: 40,
       width: 160,
       height: 30,
       shape: 'angular-shape',
       componentName: 'demo-template'
-    });
   }
 }
 ```
@@ -91,6 +113,11 @@ export class AppComponent {
       return { injector: this.injector, content: this.demoTpl };
     });
     this.graph.addNode({
+      data: {
+        ngArguments: {
+          title: 'Angular Callback'
+        }
+      },
       x: 240,
       y: 40,
       width: 160,

packages/x6-angular-shape/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/x6-angular-shape",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "X6 shape for rendering angular components.",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/x6-angular-shape/src/view.ts

@@ -43,12 +43,20 @@ export class AngularShapeView extends NodeView<AngularShape> {
         applicationRef,
         injector,
       )
+      const ngArguments =
+        (node.data?.ngArguments as { [key: string]: any }) || {}
       if (content instanceof TemplateRef) {
-        const portal = new TemplatePortal(content, viewContainerRef)
+        const portal = new TemplatePortal(content, viewContainerRef, {
+          ngArguments,
+        })
         domOutlet.attachTemplatePortal(portal)
       } else {
-        const portal = new ComponentPortal(content as any, viewContainerRef)
-        domOutlet.attachComponentPortal(portal)
+        const portal = new ComponentPortal(content, viewContainerRef)
+        const componentRef = domOutlet.attachComponentPortal(portal)
+        Object.keys(ngArguments).forEach(
+          (v) => (componentRef.instance[v] = ngArguments[v]),
+        )
+        componentRef.changeDetectorRef.detectChanges()
       }
     }
   }

packages/x6-angular-shape/tsconfig.json

@@ -1,3 +1,3 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.json"
 }

sites/x6-sites/docs/tutorial/advanced/react.zh.md

@@ -424,9 +424,18 @@ yarn add @antv/x6-angular-shape
 
 ```
 
-#### 使用
+将Angular component作为节点渲染，并且允许你传递参数给组件。
+```ts
+import { Component, Input } from '@angular/core';
 
-将Angular component作为节点渲染。
+@Component({
+  selector: 'app-node',
+  template: `<div>{{ title }}</div>`
+})
+export class NodeComponent {
+  @Input() title: string;
+}
+```
 ```ts
 // other package from angular
 import '@antv/x6-angular-shape'
@@ -441,6 +450,13 @@ export class AppComponent {
   addAngularComponent(): void {
     Graph.registerAngularContent('demo-component', { injector: this.injector, content: NodeComponent });
     this.graph.addNode({
+      data: {
+        // You can pass data to the component, only if you wrap attribute with ngArguments
+        ngArguments: {
+          // Declare @Input() in the component, then it will be assignmented
+          title: 'Angular Component'
+        }
+      },
       x: 40,
       y: 40,
       width: 160,
@@ -452,10 +468,10 @@ export class AppComponent {
 }
 ```
 
-将Angular template作为节点渲染。
+将Angular template作为节点渲染，并且允许你传递参数给模板。
 ```html
-<ng-template #demoTpl>
-  <div>Angular Template</div>
+<ng-template #demoTpl let-data="ngArguments">
+  <div>{{ data.title }}</div>
 </ng-template>
 ```
 ```ts
@@ -472,19 +488,22 @@ export class AppComponent {
   addAngularTemplate(): void {
     Graph.registerAngularContent('demo-template', { injector: this.injector, content: this.demoTpl });
     this.graph.addNode({
+      data: {
+        ngArguments: {
+          title: 'Angular Template'
+        }
+      },
       x: 240,
       y: 40,
       width: 160,
       height: 30,
       shape: 'angular-shape',
       componentName: 'demo-template'
-    });
   }
 }
 ```
 
 在注册函数中, 使用回调函数进行渲染，这种方式使得你可以读取节点中的一些属性。
-
 ```ts
 // other package from angular
 import '@antv/x6-angular-shape'
@@ -503,6 +522,11 @@ export class AppComponent {
       return { injector: this.injector, content: this.demoTpl };
     });
     this.graph.addNode({
+      data: {
+        ngArguments: {
+          title: 'Angular Callback'
+        }
+      },
       x: 240,
       y: 40,
       width: 160,