Javascript 角度2选项卡-访问子元素

我尝试使用angular 2文档中的示例访问tabs组件中的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>

把这个盒子拖来拖去

使用上述代码，我只能访问

标记之外的元素

更新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);

    }
}

从'angular2/core'导入{Component，ElementRef，Inject，OnInit，ViewChild，AfterViewInit，viewenclosuration}；
从“/tabs.component”导入{UiTabs，UiPane}；
@组成部分({
选择器：“表单生成器”，
//templateUrl:'./app/formbuilder/formbuilder.component.html'，
模板：`
试验室
你有1个细节。
第二组
`,
指令：[UiTabs，UiPane]，
})
导出类FormBuilderComponent在ViewInit之后实现{
@ViewChild（'testDiv'）testDiv:ElementRef；
ngAfterViewInit（）{
//viewChild已设置
var myDiv:htmldevelement=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>

第一选项卡分区
你有1个细节。
第二选项卡分区

---

因此，在ngAfterViewInit（）之后，可以访问活动选项卡中名为“Summary”的元素，但它对其他选项卡的元素不起作用。关于如何访问选项卡更改上的元素，您有什么建议吗？

您可以尝试以下方法：

@ViewChild('testBox') testDiv:ElementRef;

而不是：

@ViewChild('testDiv') testDiv:ElementRef;

---

（或者是你的代码片段中的输入错误）

好的；-）为什么在代码中需要模板标记？Angular使用它…模板标记来自我前面提到的tabs示例中的UiPane指令：我认为这是因为视图封装，因为

模板

元素创建了一个嵌入式视图…它应该可以工作：