Question

在我的组件的一个html中，我们使用了一些<ng-template>标签。

在内部代码中，我们希望定义一个引用，以便从nativeElement访问div的@ViewChild。

我想要恢复的元素是tabset指令，位于子指令p-datatable sub的ng-template中。

这是我们的component.html代码（我们使用primeNG和ngx-bootstrap模块和tabs / datatable指令）：

<tabset #staticTabs>
    <tab>
        <ng-template tabHeading>
            <span class="hidden-sm-down">
                Tab Header Text
            </span>
        </ng-template>          
        <p-dataTable [value]="data">
            <p-column field="id" header="Id"></p-column>
            <p-column field="context" header="Context">
                <ng-template let-context="rowData" pTemplate="body">
                    <div class="container" #iWantThisElementNative></div>
                </ng-template>
            </p-column>
        </p-dataTable>
    </tab>
</tabset>

我们的组件：

export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('iWantThisElementNative') iWantThisElementNative;

  ...

  ngAfterViewInit() {
    console.log(this.iWantThisElementNative.nativeElement);
  }
}

我们遇到的错误：

错误错误：未捕获（在承诺中）：TypeError：无法读取属性未定义的'nativeElement'

我尝试在tabset顶部引用div并使其正常工作。我试图将div移到ng-template之外，它也有效。

如何在<ng-template>内访问放置在自定义指令中的elementRef？

访问elementRef在指令中包含的ng-template中

0 个答案: