Как найти Элемент внутри TemplateRef

Question

Я гуглял вокруг, и все еще немного новичок в угловых 5/6, но я пытаюсь понять, возможно ли что-то.

---

Проблема

Скажем, у меня есть шаблон:

<ng-template #rt let-r="result" let-t="term">
  <ngb-highlight [result]="r.typeAheadDisplayName" [term]="t" ></ngb-highlight>
  <span *ngIf="r.primaryName ">(alias for {{ r.primaryName }}) </span>{{ r.metaData }}
</ng-template>

В этом шаблоне будет сгенерирована кнопка, которую можно использовать каксредство выбора варианта.Тем не менее, по определенной причине мне нужно иметь возможность нацеливаться на :first-child массива кнопок.

Я знаю, что могу выбрать элемент / шаблон, выполнив:

@ViewChild('rt') rt : TemplateRef<any>;

, но могу ли я на самом деле сделать функцию, аналогичную .find jQuery или даже такую ​​же в AngularJS, для нацеливанияэлементы, которые будут найдены внутри этого шаблона.Я гуглил и не вижу, чтобы найти ответ.

Answer 1

nativeElement - это то, что вы ищете.Он даст вам собственный DOM-узел, и с его помощью вы можете использовать методы, такие как querySelector, для запроса дочерних узлов.

@Component()
export class MyComponent implements OnInit {
    @ViewChild('rt') rt : ElementRef;

    ngOnInit() {
        const childNode = this.rt.nativeElement.querySelector('.child-class');
    }
}

Обновление:

Для использованияng-template, вы можете использовать ContentChild и TemplateRef вместе.В TemplateRef по-прежнему есть встроенный ElementRef, поэтому вы все равно сможете получить доступ к свойству nativeElement и выполнять любые запросы, которые вам нужны.

<ng-template [ngTemplateOutlet]="rt"></ng-template>

@Component({selector: 'my-component'})
export class MyComponent implements OnInit {
    @ContentChild('rt') rt: TemplateRef<any>;

    ngOnInit() {
        const childNode = this.rt.elementRef.nativeElement.querySelector('.foo');
    }
}

Теперь вы можете использовать этот компонент следующим образом:

<my-component>
    <ng-template #rt>
        <div class="foo">Hello world</div>
    </ng-template>
</my-component>