从组件实例获取ElementRef

Question

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

test.component.html：

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

my-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;

像这样的东西？