Hola, tengo una situación en la que uso el mismo componente secundario dos veces en el componente principal. El componente de niños es un menú desplegable. Utilizo la referencia del elemento para acceder al menú desplegable desde un componente principal, pero existe el problema de que devuelve el primer elemento que coincide con un componente determinado, por lo que siempre hace cosas para el primer componente secundario y no para el segundo que uso en el componente principal. Mi pregunta, ¿cómo apuntar al segundo componente secundario que uso en el componente principal? Agregué un pseudocódigo para comprender mejor mi pregunta.

HTML del componente principal

 <app-dropdown></app-dropdown> <app-dropdown></app-dropdown>

Componente padre TS

 this.child.dropdownToggleRef.nativeElement.focus();

Componente hijos TS

 @ViewChild('dropdownToggleRef') dropdownToggleRef: ElementRef;

Componente secundario HTML

 <div #dropdownToggleRef [class.open]="open" [ngClass]="{ 'more mx-right': ellipsisMode }" [attr.aria-label]="ariaLabel" [attr.aria-haspopup]="true" [attr.aria-expanded]="open" [tabIndex]="disabled ? -1 : 0" [autofocus]="focus" > </div>