angular - EventEmitter 和递归

Question

当我有一个带有选择器'recursive-element'的模板时，它的模板看起来像这样

<li *ngFor="let x of y" (click)="greet($event)">
   <div *ngIf="x.children">
      <recursive-element [y]="x.children"></recursive-element>
    </div>
</li>

在我定义的类中

greetEvent = new EventEmitter();
greet(e){
  greetEvent.emit("hello world!");
  e.stopPropagation();
}

在另一个组件中，我将其添加到模板中，例如

hi(x){
  alert(x)
}

当我点击嵌套的recurive-element时，事件不会触发，但当我点击第一个li元素时，它会触发

是因为递归，所以 Even 只绑定(bind)到第一个递归元素而不是嵌套元素，还是有什么我误解的？

Answer 1

Angular2 中的自定义事件不是 bubbled up所以你可以:

1. 在 <recursive-element> 上发出父事件当其中一个 child 发出事件时 - 这将创建一个新的 EventEmitter每个 child 。

在这种情况下，子组件应该是这样的:

@Component({
    selector: 'recursive-comp',
    template: `
        <div>
        <div *ngFor="let item; of tree;">
        <a href="#" (click)="onClick(item)">{{item.name}}</a>
        <recursive-comp *ngIf="item.children" [tree]="item.children" (clickEvent)="onClickChild($event)"></recursive-comp>
        </div>
        </div>
    `
})
export class RecursiveCmp {
    @Input() tree = null;
    @Output() clickEvent = new EventEmitter();

    constructor() {

    }

    onClick(item) {
        console.log("clicked", item);
        this.clickEvent.emit(item);
    }

    onClickChild(item) {
        this.clickEvent.emit(item);
    }
}

看到这个plunker for event per child

创建一个服务来保存 EventEmitter并将由 parent 和 child 使用。为此，服务应该是单例，因此最好的选择是在bootstrap注册提供者。时间。

这是服务代码:

@Injectable()
export class ClickerService {
   clickEvent = new EventEmitter();

   clicked(item) {
     this.clickEvent.emit(item);
   }
}

子组件:

@Component({
  selector: 'recursive-comp',
  template: `
    <div>
      <div *ngFor="let item; of tree;">
        <a href="#" (click)="onClick(item)">{{item.name}}</a>
        <recursive-comp *ngIf="item.children" [tree]="item.children"></recursive-comp>
      </div>
    </div>
  `
})
export class RecursiveCmp {
  @Input() tree = null;
  constructor(private clickerService: ClickerService) {}

  onClick(item) {
    this.clickerService.clicked(item);
  }
}

看到这个plunker for service event