Как передать переменную шаблона в компонент без ViewChild

Мне нужно передать компонент A другому компоненту B. Компоненту B нужен доступ к nativeElement A. Мне удалось заставить его работать следующим образом:

Контейнер

Шаблон

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

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

Контроллер

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

Компонент Б

 @Input() origin: ElementRef;

Есть ли способ заставить его работать без ViewChild, просто передав ссылку на шаблон?

Это должно выглядеть так:

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

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

Прямо сейчас, если я сделаю это так, я не смогу получить доступ к nativeElement.


javascript angular viewchild
person Daskus    schedule 12.10.2017    source источник
comment
Вы также можете добавить constructor(public elRef: ElementRef) к component-a и передать его как componentA.elRef. В шаблоне ссылочная переменная шаблона #componentA всегда будет ссылаться на экземпляр компонента в вашем случае.   -  person yurzui    schedule 12.10.2017
comment
Дело в том, что я хотел бы иметь возможность делать это с любым компонентом. С вашим решением мне нужно будет переопределить все компоненты и добавить ElementRef в конструктор.   -  person Daskus    schedule 12.10.2017
comment
Почему вам нужно передать весь компонент другому компоненту в качестве параметра?   -  person omeralper    schedule 12.10.2017
comment
@omeralper Мне нужно клонировать собственный элемент, внести некоторые изменения и отобразить его внутри другого компонента.   -  person Daskus    schedule 12.10.2017

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете написать класс обслуживания, который может ссылаться на компонент и внедрить сервис везде, где вам нужно использовать указанный компонент.

@Component
class Component1 implements OnInit{

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

   }

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

ShareService {

   public sharedComponent;

}

Лучшим дизайном было бы иметь sharedComponent как Observable.

person Sunil Singh    schedule 07.10.2018