angular 2 tabs - 访问子元素 [英] angular 2 tabs - access child elements
问题描述
我正在尝试使用 angular 2 文档中的示例访问 tabs 组件内的 html 元素:https://angular.io/resources/live-examples/homepage-tabs/ts/plnkr.html到目前为止，这是我的实现:
import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit} from 'angular2/core';从'./tabs.component'导入{UiTabs，UiPane}；@成分({选择器:'表单生成器'，templateUrl: './app/formbuilder/formbuilder.component.html',指令:[UiTabs、UiPane]})导出类 FormBuilderComponent 实现 AfterViewInit {@ViewChild('testDiv') testDiv:ElementRef;ngAfterViewInit() {//viewChild 已设置var myDiv: HTMLDivElement = this.testDiv.nativeElement;控制台日志(myDiv)；}}和 formbuilder.component.html 代码:
<div class="moving-box" #testDiv>拖动这个框使用上面的代码，我只能访问 标签之外的元素.
更新 1:
import {Component, ElementRef, Inject, OnInit,ViewChild, AfterViewInit,ViewEncapsulation} from 'angular2/core';从'./tabs.component'导入{UiTabs，UiPane}；@成分({选择器:'表单生成器'，//templateUrl: './app/formbuilder/formbuilder.component.html',模板:`<ui-tabs><模板ui-pane title='概览'><div>测试div</div>您有 1 个详细信息.<模板 ui-pane title='Summary' active="true"><div #testDiv>第二个 div</div></ui-tabs>`，指令:[UiTabs，UiPane]，})导出类 FormBuilderComponent 实现 AfterViewInit {@ViewChild('testDiv') testDiv:ElementRef;ngAfterViewInit() {//viewChild 已设置var myDiv: HTMLDivElement = this.testDiv.nativeElement;控制台日志(myDiv)；}}上面的例子是有效的，但似乎只有在最初呈现视图时当前选项卡具有active='true'"时才能访问该元素，否则会报错.这是一个非工作示例:
<模板ui-pane title='概览'><div #testDiv>第一个标签 div</div>您有 1 个详细信息.<模板 ui-pane title='Summary' active="true"><div #testDiv1>第二个标签 div</div></ui-tabs> 因此，在 ngAfterViewInit() 之后，可以访问名为Summary"的活动选项卡中的元素，但它不适用于其他选项卡的元素.关于如何访问选项卡更改元素的任何建议?
您可以尝试以下操作:
@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)
这篇关于angular 2 tabs - 访问子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
