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();
}

在另一个组件中，我将它添加到tempalte中，例如

hi(x){
  alert(x)
}

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

是因为递归，所以甚至只绑定到第一个递归元素，而不是嵌套的元素，还是有什么我想知道的？

Answer 1

angular2中的自定义事件不是冒泡，因此您可以：

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

在这种情况下，子组件应该如下所示：

@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);
    }
}

参见此每名儿童事件的柱塞

1. 创建一个包含EventEmitter并将由父级和子级使用的服务。为此，服务应该是单例的，因此最好的选择是在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);
  }
}

参见此服务事件柱塞