typescript - Hur man får komponentklass från en native elementreferens i Angular

Jag har ett HTML Div-element med angular-komponentbarn inne i div:en. På något sätt ser angular-mallen ut så här.

        <mat-radio-group [(ngModel)]="selectedRadioValue">
          <div
            #radioButtonDiv
            *ngFor="let opt of getInputPayload(); index as optIndex"
          >
            <mat-radio-button [value]="opt">
              {{ opt.label }}
            </mat-radio-button>
            <ng-container *ngIf="someCondition === true">
              <app-my-component [attr]="opt.foo"></app-my-component>
            </ng-container>
          </div>
        </mat-radio-group>

Jag fick referensen till det yttre div-elementet med @ViewChildren

  @ViewChildren('radioButtonDiv') radioButtonDiv: QueryList<ElementRef<HTMLDivElement>>;

Hur får jag åtkomst till <app-my-component>-komponentklassen inuti radioButtonDiv QueryList?

Jag försökte använda querySelector() från den yttre div:ens nativeElement.

        this.radioButtonDiv.forEach((rbd, index) => {
          if (index === findIndex) {
            // Ignore the setTimeout.
            setTimeout(() => {
              const findChild = rbd.nativeElement.querySelector('app-formulir-medis-attribute');
            }, 500);
          }
        });

Dock visar findChild-resultatet i ovanstående kod nativeElement för <my-component>-komponenten och inte Angular-komponenten, därför kunde jag inte komma åt dess attribut och egenskaper. Hur får jag MyComponent-klassen från elementreferensen ovan?

Tack!

Svar #1

Du kan använda ContentChild eller ng-content-taggen. Här är ett Stackblitz-exempel.

Svar #2

För att få åtkomst till <app-my-component>-komponentklassen istället för DOM-elementet kan du använda @ViewChildren med komponentklassen som selektor.

Så, om komponentklassen är MyComponent, skulle det se ut så här:

@ViewChildren(MyComponent) myComponents!: QueryList<MyComponent>;

Här är en StackBlitz som visar detta tillvägagångssätt.