javascript - 我可以在不使用模板中的 `#` 的情况下访问 native DOM 元素吗

Question

我可以像这样使用 @ViewChildren 装饰器访问组件 View 中的组件:

@Component({
  selector: 'my-app',
  template: `
    <alert type="info"></alert>
  `,
})
export class App {
  @ViewChildren(AlertComponent) alerts: QueryList<AlertComponent>

除了在模板中使用 # 符号之外，还有什么方法可以使用 @ViewChildren 装饰器 访问 DOM 元素？也许是某种读取参数风格？

  selector: 'my-app',
  template: `
    <div #divElement>Tada!</div>
  `,
})

@ViewChild("divElement") div: any;

如果不可能，请在评论或回答中提及。只是想确定地知道。

Answer 1

ViewChild 装饰器仅适用于 ComponentRef 或 ref-variable。第二个参数对已经查询的元素起作用。这里给出了一个很好的答案:

https://stackoverflow.com/a/35209681/324224

ViewChild 是如何实现的可以在 Angular 仓库中看到:

https://github.com/vicb/angular/blob/master/modules/@angular/core/src/metadata/di.ts#L353

并且基于文档和测试:

https://github.com/angular/angular/blob/14ee75924b6ae770115f7f260d720efa8bfb576a/modules/%40angular/core/test/metadata/di_spec.ts

我很确定只支持两种选择器类型 - ComponentRef 和 ref-variable。