Question

我正在尝试使用angular 2 docs中的示例访问tabs组件中的html元素： https://angular.io/resources/live-examples/homepage-tabs/ts/plnkr.html 这是我到目前为止的实现：

      import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit} from 'angular2/core';
import {UiTabs, UiPane} from './tabs.component';


@Component({
    selector: 'form-builder',
    templateUrl: './app/formbuilder/formbuilder.component.html',
    directives: [UiTabs, UiPane]
})

export class FormBuilderComponent implements AfterViewInit {
  @ViewChild('testDiv') testDiv:ElementRef;
  ngAfterViewInit() {
      // viewChild is set
       var myDiv: HTMLDivElement = this.testDiv.nativeElement;
       console.log(myDiv);
    }

}

和formbuilder.component.html代码：

<template ui-pane title='Add'>
  <div class="moving-box" #testDiv>
    Drag this box around
  </div>
</template>

使用上面的代码，我只能访问<template>标记之外的元素。

更新1：

import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit,ViewEncapsulation} from 'angular2/core';
import {UiTabs, UiPane} from './tabs.component';


@Component({
    selector: 'form-builder',
    //templateUrl: './app/formbuilder/formbuilder.component.html',
    template: `
    <ui-tabs>
          <template ui-pane title='Overview'>
            <div>test div</div>
            You have 1 details.
          </template>
          <template ui-pane title='Summary' active="true">
            <div #testDiv>second div</div>
          </template>
        </ui-tabs>
    `,
    directives: [UiTabs, UiPane],
})

export class FormBuilderComponent implements AfterViewInit {
  @ViewChild('testDiv') testDiv:ElementRef;
  ngAfterViewInit() {
      // viewChild is set
       var myDiv: HTMLDivElement = this.testDiv.nativeElement;
       console.log(myDiv);

    }
}

上面的示例有效，但似乎只有在最初呈现视图时当前选项卡具有“active ='true'”才能访问该元素，否则会出错。这是一个非工作的例子：

    <ui-tabs>
      <template ui-pane title='Overview'>
        <div #testDiv>first tab div</div>
        You have 1 details.
      </template>
      <template ui-pane title='Summary' active="true">
        <div #testDiv1>second tab div</div>
      </template>
    </ui-tabs>

因此在ngAfterViewInit（）之后，可以访问名为“Summary”的活动选项卡中的元素，但它不适用于其他选项卡的元素。关于如何能够访问选项卡上的元素的任何建议？

Answer 1

您可以尝试以下方法：

@ViewChild('testBox') testDiv:ElementRef;

而不是：

@ViewChild('testDiv') testDiv:ElementRef;

（或者你的片段中的拼写错误）

angular 2 tabs - 访问子元素

1 个答案: