angular - 我如何获得对 Angular2 中 Observable 的最后一次更改所添加的组件的引用？

Question

我制作了一个自定义组件并从父组件引用它，如下所示:

<div *ngFor="let item of list | async">
  <child-component></child-component>
</div>

在父组件中，“列表”定义为:

public list: Observable<any[]>;

当我通过将某物添加到列表正在观察的事物中来将其添加到“列表”时，新的子组件将添加到 DOM 中。

this.list.push(new-object);
// this adds a new child-component to the DOM and 
// returns a value that I need to add into the new object I just pushed

我的问题是:我如何在推送之后获取对“列表”最后添加创建的组件的引用，以便我可以使用“this.list.push”的响应中的信息进一步修改该项目？

Answer 1

有几种方法

你可以设置一个属性或特性来表明你想要获取什么元素

<div *ngFor="let item of list; let last=last">
  <child-component [item]="item" [attr.last]="last ? true : null" [isLast]="last"></child-component>
</div>

获取元素或组件

@ViewChildren(ChildComponent) children: QueryList<ChildComponent>;
@ViewChildren(ChildComponent, {read: ElementRef}) childElements: QueryList<ElementRef>;

您可以查询所有这些元素，只获取最后一个元素或获取具有特定属性或属性集的元素

  ngAfterViewInit() {
    this.children.changes.subscribe(val => {
      console.log('all children: ', this.children.toArray());
      console.log('last children: ', this.children.toArray()[this.children.toArray().length - 1]);
      console.log('child with last attribute: ', this.children.toArray().find(child => child.elementRef.nativeElement.getAttribute('last') != null));
      console.log('child with isLast property set: ', this.children.toArray().find(child => child.isLast);

      console.log('all childElements: ', this.childElements.toArray());
      console.log(this.childElements.toArray().find(child => child.nativeElement.getAttribute('last') != null)); // <<< doesn't work, don't know why
    });
  }

Plunker example