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();
  }
}

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

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

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

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

1 个答案: