angular - ContentChildren，获取组件和原生Element

Question

我一直在寻找 Angular 的文档和源代码，但到目前为止一无所获。

import {
  ContentChildren,
  QueryList
} from '@angular/core';
import { AwesomeComponent } from './awesome.component';

@Component({
  selector: 'cool-dad',
  templateUrl: './cool-dad.template.html'
})
export class CoolDadComponent {
  @Input() loop = false;
  @Input() automatic = false;
  @ContentChildren(AwesomeComponent) items: QueryList<AwesomeComponent>;

  someFunc() {
    this.items.forEach(item => { console.log(item)});
  }
}

通过上面的代码，我获得了对组件的引用，我可以设置它的属性并调用它的公共(public)方法。这很好，但我还需要访问它的 html 属性，例如宽度、高度等。

import {
  ContentChildren,
  ElementRef,
  QueryList
} from '@angular/core';
import { AwesomeComponent } from './awesome.component';

@Component({
  selector: 'cool-dad',
  templateUrl: './cool-dad.template.html'
})
export class CoolDadComponent {
  @Input() loop = false;
  @Input() automatic = false;
  @ContentChildren(AwesomeComponent, { read: ElementRef }) items: QueryList<AwesomeComponent>;

  someFunc() {
    this.items.forEach(item => { console.log(item)});
  }
}

通过上面的代码，我获得了 native 元素，因此我可以访问所有 html 属性，但我失去了对组件方法的所有访问权限。

我怎样才能同时获得两者？

Answer 1

只需在 AwesomeComponent 的构造函数中声明以下内容:

constructor(public elem: ElementRef) {}

这样您就可以访问公共(public)属性 elem 并访问每个组件的 html 属性:

someFunc() {
 this.items.forEach(item => {console.log(item.elem.nativeElement.style.someHTMLProperty)});
}