Angular多次调用指令

Question

树-view.html

<div *ngFor="let item of nodes; let i=index" class="parent" [id]="item.name" appTreeView>
        {{item.name}}
        <div class="child" *ngIf="item.child">
            <app-tree-view [nodes]="item.child"></app-tree-view>  // recursive call 
        </div>
</div>

treeview.ts

this.data=[
      {
        name:"level 1",
        child:[
          {
            name:"level 1.1",
          }
        ]
      },
      {
        name:"level 2",
        child:[
          {
            name:"level 2.1",
            child:[
              {
                name:"level 2.1.1"
              }
            ]
          }
        ]
      }
    ]

directive.ts

import { Directive, HostListener,Renderer2 } from '@angular/core';

@Directive({
  selector: '[appTreeView]',
})
export class TreeViewDirective {

  constructor(private render:Renderer2) { }
  @HostListener('click',['$event'])
  check(event){
    console.log(event.target.id);
    const avalclass:string=event.target.classList.value;
    if(avalclass.includes('expand')){
      this.render.removeClass(event.target,'expand');
    }else{
      this.render.addClass(event.target,'expand');
    }
    
  }
}

输出

1 级
2 级

如果我点击 2 级展开子菜单 2.1 级 控制台打印一次

1 级
2 级
- 2.1 级

然后我点击级别 2.1 展开子菜单 2.1.1 控制台打印两次

1 级
2 级
- 2.1级
  - 2.1.1 级

为什么控制台打印多次。我的错误是什么

Answer 1

由于您正在使用递归来调用父项及其后代，因此控制台会多次打印相同的内容。 您多次绑定点击事件，具体取决于您点击的元素所在的级别。如果您了解代码流程：

如果您单击第一级项目（第 1 级或第 2 级）：它会打印一次。
如果您单击第二级项目（1.1 级或 2.2 级）：它会打印两次，一次用于第二级，另一次用于第一级。
等等..

我已经用您在问题中输入的代码准备了一个演示。每次都可以在控制台看到谁在调用事件，谁是宿主元素。

https://stackblitz.com/edit/angular-recursion-directives?file=src/app/tree-view.directive.ts

你可以解决在你的指令中添加一个标志并在你的检查函数中检查它的问题：

if (this.isFired) {
      return;
    }
this.isFired = true;

或者比较当前宿主元素和触发事件的元素：

if(this.el.nativeElement.id == event.target.id){
   console.log("click on: " + event.target.id);
      const avalclass: string = event.target.classList.value;

      if (avalclass.includes("expand")) {
        this.render.removeClass(event.target, "expand");
      } else {
        this.render.addClass(event.target, "expand");
      }
    }
}

Angular多次调用指令

Angular Directive call multiple times

angular-directive

angular