从另一个组件获取组件的指令

Question

我有以下模板：

<sc-list #list drawer-track> </sc-list>

<sc-drawer [drawerTrack]="list"></sc-drawer>

我需要使用抽屉轨道指令获取 sc-drawer 组件内 sc-list 的宿主元素。

我试图在 sc-drawer 组件中使用 Injector 或 EnvironmentInjector，但我不知道如何使用它，或者也许还有另一种我不知道的方法。

Answer 1

如果您在 sc-list 组件中注入 elementRef（声明为 public）

constructor(public elementRef:ElementRef){}

list 属于 sc-list.component 类型，因此您可以在 sc-drawer 中的 .ts 中使用

console.log(this.drawerTrack.elementRef);

在 html 中，例如

{{drawerTrack.nativeElement.getBoundingClientRect()|json}}

注意：一般认为是否有必要“到达” elemntRef 而不是 sc-list.component 的任何公共变量（在 Angular 中，由于缺陷，所有变量、函数和 ViewChild 都是公共的）