从组件实例中获取 ElementRef

Question

在我的 Angular 库中，我有一个类似于下面的代码：

test.component.html:

<third-party-component #tpComponent></third-party-component>
<my-component [tp-component]="tpComponent"></my-component>

我的-component.component.ts:

import { Component, Input, OnInit } from '@angular/core';
import { ThirdPartyComponent } from '@3rd/party-library';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit {
  @Input('tp-component') tpComponent: ThirdPartyComponent;

  ngOnInit() {
    this.tpComponent.doSomething();
  }
}

我正在寻找一种方法（如果有的话）从作为 @Input 属性传递的 ThirdParyComponent 实例访问 ElementRef - 不幸的是我可以' 更改 ThirdParyComponent 以公开它自己的 ElementRef。

PS：我知道我可以在 MyComponent 上创建一个方法来设置 ThirdParyComponent 实例及其 ElementRef，但我想简化它@Input.

有什么办法可以实现吗？

Answer 1

在包含 third-party-component 和 my-component 的组件中，您可以：

@ViewChild('tpComponent') tpComponentElementRef: ElementRef;
....
<my-component [tp-component]="tpComponent" 
              [tp-component-elementRef]="tpComponentElementRef"></my-component>
....
@Input('tp-component') tpComponent: ThirdPartyComponent;
@Input('tp-component-elementRef') tpComponentElementRef: ElementRef;

是这样的吗？

从组件实例中获取 ElementRef

Get ElementRef from component instance

angular

elementref