0

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

test.component.html：

<third-party-component #tpComponent></third-party-component>
<my-component [tp-component]="tpComponent"></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();
  }
}

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

PS：我知道我可以创建一个方法MyComponent来设置ThirdParyComponent实例和它的ElementRef，但我想用@Input.

有什么办法可以做到这一点？

4

1 回答 1

0

在 和 的组件外壳中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;

像这样的东西？

于 2020-03-04T13:09:37.107 回答