如何在 Angular 模板中获取元素引用而不是组件引用

Question

考虑以下模板：

<my-component #ref></my-component>
<my-comp-2 [maxWidth]="ref.clientWidth"></my-comp-2>

我的组件没有属性.clientWidth，但托管我的组件的元素本身有属性。

是否有一个我可以使用的名称或其他类似的解决方案来单独在 HTML 中获取对元素本身的引用？例如，我想做这样的事情：

<my-component #ref="element"></my-component>

问题是没有带有exportAs名为“element”的选项的指令。Angular 网站上也没有记录任何内置的等效项。

我知道我可以添加为属性，并且我可以通过依赖项注入clientWidth获得对类内元素的引用，但我想要一个仅涉及 HTML 的解决方案。这样的解决方案存在吗？<my-component>ElementRef<HTMLElement>

Answer 1

我觉得你的答案是正确的，但出于好奇，你可以做一个艰难的工作：创建一个像

@Directive({
  selector: '[element-directive]',
  exportAs: 'ngDirective',
})
export class MyDirective {
  constructor(public elementRef: ElementRef){}
}

并使用

<my-component element-directive #ref="ngDirective">
</my-component>
<my-comp-2 [style.max-width]="ref.elementRef.nativeElement.offsetWidth+'px'">
</my-comp-2>

正如您所指出的，另一种方法是在 my-component 的构造函数中，注入 ElementRef 并将其公开

constructor(public elementRef:ElementRef){}

然后，您可以使用

<my-comp-2 [style.max-width]="ref.elementRef.nativeElement.offsetWidth+'px'">
</my-comp-2>

或者您可以在 my-component 中创建任何返回您想要的内容的函数并调用此函数

注意：我使用style.max-width，我不知道你的my-comp2是否有输入