fix: 修改添加动态属性的逻辑

.eslintrc.json

@@ -19,7 +19,6 @@
           "error",
           {
             "type": "attribute",
-            "prefix": "app",
             "style": "camelCase"
           }
         ],

src/app/components/widgets/aux-tool/helpers.widget.ts

@@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'app-helpers-widget',
+  template: ``,
+  standalone: true,
+  styleUrls: ['./styles.less'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class HelpersWidget {}

src/app/components/widgets/aux-tool/selection.widget.ts

@@ -1,35 +1,25 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ElementRef,
-  Input,
-  OnChanges,
-  Renderer2,
-  SimpleChanges,
-  ViewChild
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { usePrefix } from '@/app/utils';
 import { Engine, TreeNode } from '@/app/core/models';
 import { Selection } from '@/app/core/models/selection';
 import { Cursor } from '@/app/core/models/cursor';
 import { MoveHelper } from '@/app/core/models/move-helper';
 import { Rect } from '@/app/shared/coordinate';
+import { AttributeDirective } from '@/app/directive';
 
 @Component({
   selector: 'app-selection-box-widget',
   template: `
-    <div class="{{ prefix }}" #container style="{{ createSelectionStyle() }}">
+    <div class="{{ prefix }}" [attributes]="attributes" style="{{ createSelectionStyle() }}">
       <div class="{{ innerPrefix }}"></div>
     </div>
   `,
   standalone: true,
   styleUrls: [`./styles.less`],
+  imports: [AttributeDirective],
   changeDetection: ChangeDetectionStrategy.Default
 })
 export class SelectionBoxWidget implements OnChanges {
-  @ViewChild('container') container: ElementRef;
-
   @Input() node: TreeNode;
 
   @Input() showHelpers: boolean;
@@ -40,6 +30,8 @@ export class SelectionBoxWidget implements OnChanges {
 
   nodeRect: Rect;
 
+  attributes: { [p: string]: any };
+
   createSelectionStyle = () => {
     const baseStyle = {
       position: 'absolute',
@@ -58,20 +50,17 @@ export class SelectionBoxWidget implements OnChanges {
 
   constructor(
     private designer: Engine,
-    private renderer2: Renderer2,
     private cdr: ChangeDetectorRef
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.node && changes.node.currentValue) {
       setTimeout(() => {
         this.nodeRect = this.designer.workbench.currentWorkspace.viewport.getValidNodeOffsetRect(this.node);
+        this.attributes = {
+          [this.designer.props?.nodeSelectionIdAttrName]: this.node.id
+        };
 
-        this.renderer2.setAttribute(
-          this.container.nativeElement,
-          `${this.designer.props?.nodeSelectionIdAttrName}`,
-          this.node.id
-        );
         this.cdr.markForCheck();
       });
     }

src/app/components/widgets/component-tree/component-tree.widget.ts

@@ -1,35 +1,32 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  ElementRef,
   Input,
   OnChanges,
-  Renderer2,
-  SimpleChanges,
-  ViewChild
+  SimpleChanges
 } from '@angular/core';
 import { usePrefix } from '@/app/utils';
 import { TreeNodeWidget } from '../tree-node/tree-node.widget';
 import { IDesignerComponents } from '../../types';
 import { GlobalRegistry } from '@/app/core/registry';
 import { Engine, TreeNode } from '@/app/core/models';
+import { AttributeDirective } from '@/app/directive';
 
 @Component({
   selector: 'app-component-tree-widget',
   standalone: true,
   template: `
-    <div class="{{ prefix }}" [style]="style" #container>
+    <div class="{{ prefix }}" [style]="style" [attributes]="attributes">
       <app-tree-node-widget [node]="tree"></app-tree-node-widget>
     </div>
   `,
   styleUrls: ['./component-tree.widget.less'],
-  imports: [TreeNodeWidget],
+  imports: [TreeNodeWidget, AttributeDirective],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ComponentTreeWidget implements OnChanges, AfterViewInit {
-  @ViewChild('container') container: ElementRef;
-
   prefix = usePrefix('component-tree');
 
   @Input() components: IDesignerComponents;
@@ -40,9 +37,11 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
 
   displayName = 'ComponentTreeWidget';
 
+  attributes: { [p: string]: any };
+
   constructor(
     private designer: Engine,
-    private renderer2: Renderer2
+    private cdr: ChangeDetectorRef
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -53,7 +52,10 @@ export class ComponentTreeWidget implements OnChanges, AfterViewInit {
 
   ngAfterViewInit(): void {
     this.tree = this.useTree();
-    this.renderer2.setAttribute(this.container.nativeElement, `${this.designer?.props?.nodeIdAttrName}`, this.tree.id);
+    this.attributes = {
+      [this.designer?.props?.nodeIdAttrName]: this.tree.id
+    };
+    this.cdr.markForCheck();
   }
 
   registerDesignerBehaviors() {

src/app/directive/attribute.directive.ts

@@ -0,0 +1,29 @@
+import { Directive, OnChanges, Input, Renderer2, ElementRef, SimpleChanges } from '@angular/core';
+
+@Directive({
+  standalone: true,
+  selector: '[attributes]'
+})
+export class AttributeDirective implements OnChanges {
+  @Input()
+  public attributes: { [key: string]: any };
+
+  constructor(
+    private renderer: Renderer2,
+    private elementRef: ElementRef
+  ) {}
+
+  public ngOnChanges(changes: SimpleChanges): void {
+    if (changes.attributes) {
+      console.log('attributes>>>', this.attributes);
+      for (const attributeName in this.attributes) {
+        const attributeValue = this.attributes[attributeName];
+        if (attributeValue) {
+          this.renderer.setAttribute(this.elementRef.nativeElement, attributeName, attributeValue);
+        } else {
+          this.renderer.removeAttribute(this.elementRef.nativeElement, attributeName);
+        }
+      }
+    }
+  }
+}

src/app/directive/index.ts

@@ -0,0 +1 @@
+export * from './attribute.directive';