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

Question

I need to pass a component A to another component B. Component B needs access to the nativeElement of A. I managed to get it to work like this:

Container

Template

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

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

Controller

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

Component B

 @Input() origin: ElementRef;

---

Is there a way to get it to work without ViewChild, just with passing the template reference?

It should look like this:

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

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

Right now if I do it like this I cannot access the nativeElement.

Answer 1

You can write the service class which can refer to the component and inject the service wherever you require to use the referred component.

@Component
class Component1 implements OnInit{

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

   }

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

ShareService {

   public sharedComponent;

}

Better design would be to have sharedComponent as Observable.