如何在 TemplateRef 中找到 Element

Question

我一直在谷歌搜索，对 angular 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>;

但是，我真的可以做一个类似于 jQuery 的 .find 甚至在 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>