如何在 TemplateRef 中找到 Element

Posted 2023-03-13

【中文标题】如何在 TemplateRef 中找到 Element

【英文标题】：How do I find Element inside TemplateRef

【发布时间】：2018-10-29 05:43:01

【问题描述】：

我一直在谷歌搜索，对 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 中的函数，来定位在这个模板中可以找到的元素。我一直在谷歌搜索，无法找到答案。

【问题讨论】：

使用rt.nativeElement

【参考方案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>

【讨论】：

好的，所以我要修改我的问题，因为我刚刚意识到这是专门针对 ng 模板的。 QuerySelector 不是 templateRef 上的函数

更新了答案。这行得通吗？顺便说一句，我的第一个解决方案仍然可以使用TemplateRef，只需使用this.rf.elementRef.nativeElement 而不是this.rt.nativeElement。

是的，非常感谢。这非常有用。

另外，看看my question/answer here。可能与您正在尝试做的事情相似，或者可能是以后的好书签：

我想querySelector 是一个javascript函数。直接在 Angular 代码 w.r.t 中使用 Javascript 函数是否安全？可移植性？我想避免在 Angular 代码中混合 Javascript 代码。你知道如何在不使用纯 JavaScript（Renderer2、ViewChild）的情况下做到这一点吗？