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>;

但是，我是否可以实际执行类似于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>

如何在TemplateRef中找到Element

1 个答案: