javascript - 如何在没有 ViewChild 的情况下将模板变量传递给组件

Question

我需要将组件 A 传递给另一个组件 B。组件 B 需要访问 A 的 nativeElement。我设法让它像这样工作：

容器

模板

<component-a #componentA></component-a>

<component-b [origin]="reference"></component-b>

控制器

@ViewChild('componentA', {read: ElementRef}) reference: ElementRef;

B组份

 @Input() origin: ElementRef;

---

有没有办法让它在没有 ViewChild 的情况下工作，只需传递模板引用？

它应该如下所示：

<component-a #componentA></component-a>

<component-b [origin]="componentA"></component-b>

现在，如果我这样做，我将无法访问 nativeElement。

Answer 1

您可以编写可以引用组件的服务类，并在需要使用引用组件的任何地方注入服务。

@Component
class Component1 implements OnInit{

   constructor(private ShareService : ShareService, private ref : ElementRef){

   }

   public ngOnInit(){
       this.shareService.sharedComponent = this.ref;
   }
}

ShareService {

   public sharedComponent;

}

更好的设计是具有sharedComponent可观察性。