角度2选项卡 - 访问子元素 [英] angular 2 tabs - access child elements

问题描述

我尝试使用angular 2文档中的示例访问tabs组件内的html元素：
https://angular.io/resources/live-examples/homepage-tabs/ts/plnkr.html
这是我目前的实施：从'angular2 / core'导入{Component，ElementRef，Inject，OnInit，ViewChild，AfterViewInit};

  
从'./tabs.component'导入{UiTabs，UiPane}; 
 
 
 @Component（{
 selector：'form-b​​uilder'，
 templateUrl：'./app/formbuilder/formbuilder.component.html'，
指令：[UiTabs，UiPane] 
}）
 
导出类FormBuilderComponent实现AfterViewInit {
 @ViewChild（'testDiv'）testDiv：ElementRef; 
 ngAfterViewInit（）{
 // viewChild设置
 var myDiv：HTMLDivElement = this.testDiv.nativeElement; 
 console.log（myDiv）; 
} 
 
} 
  

和formbuilder.component.html code：

 < template ui-pane title ='Add'> 
< div class =moving-box＃testDiv> 
将此框拖到
< / div> 
< / template> 
  

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

UPDATE 1：

  import {Component，ElementRef，Inject， OnInit，ViewChild，AfterViewInit，ViewEncapsulation} from'angular2 / core'; 
从'./tabs.component'导入{UiTabs，UiPane}; 
 
 
 @Component（{
 selector：'form-b​​uilder'，
 // templateUrl：'./app/formbuilder/formbuilder.component.html'， 
模板：`
< ui-tabs> 
<模板ui-pane title ='概览'> 
< div>测试div< / div> 
您有1个详细信息
< / template> 
< template ui-pane title ='Summary'active =true> 
< div＃testDiv> second div< ; / div> 
< / template> 
< / ui-tabs> 
`，
指令：[UiTabs，UiPane]，
}）
 
导出类FormBuilderComponent实现AfterViewInit {
 @ViewChild（'testDiv'）testDiv：ElementRef; 
 ngAfterViewInit（）{
 // viewChild设置
 var myDiv：HTMLDivElement = this.testDiv.nativeElement; 
 console.log（myDiv）; 
 
 
 
 
 
 
上面的例子有效，但它似乎该元素只能在当前视图最初呈现时具有active ='true'的情况下才能被访问，否则会产生错误。 
这里是一个不起作用的例子： 
 
 
 < ui-tabs> 
< template ui-pane title ='Overview'> 
< div＃testDiv>第一个标签div< / div> 
您有1个详细信息。 
< / template> 
< template ui-pane title ='Summary'active =true> 
< div＃testDiv1>第二个标签div< / div> 
< / template> 
< / ui-tabs> 
  
因此，在ngAfterViewInit（）之后，可以访问活动选项卡中名为摘要的元素，但它不适用于其他选项卡的元素。有关如何访问选项卡上的元素的任何建议？
解决方案
您可以尝试以下操作：
  @ViewChild（'testBox'）testDiv：ElementRef; 
  
而不是： 
 
 
  @ViewChild（'testDiv'）testDiv：ElementRef; 
  
（或者是您的片段中的拼写错误）
 
i'm trying to access the html elements inside the tabs component using the example from angular 2 docs:
https://angular.io/resources/live-examples/homepage-tabs/ts/plnkr.html
Here is my implementation so far:
      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);
    }

}
And the formbuilder.component.html code:
<template ui-pane title='Add'>
  <div class="moving-box" #testDiv>
    Drag this box around
  </div>
</template>
Using the above code i can only access the elements outside the <template> tag. 

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

    }
}
The above example works, but it seems that the element can only be accessed if the current tab has the "active='true'" when the view is initially rendered, otherwise it will give an error.
And here is an non working example:
    <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>
So after the ngAfterViewInit(), the element from the active tab called "Summary" will be accessible, but it won't work for the elements for the other tab(s). Any suggestions on how to be able to access the elements on tab change?
解决方案
You could try the following:
@ViewChild('testBox') testDiv:ElementRef;
instead of:
@ViewChild('testDiv') testDiv:ElementRef;
(Or it's a typo in your snippet)

                        
这篇关于角度2选项卡 - 访问子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！