获取单击的div的宽度,高度和偏移量-Angular 2 [英] Get the width, height and offset of clicked div - Angular 2
问题描述
我有一个模板,可使用*ngFor
创建链接列表,并有一个单独的div元素,我想根据当前活动的链接来更改其位置.
I have a template that creates a list of links using *ngFor
and a separate div element that I want to change its location based on the currently active link.
模板:
<div #divHandle
*ngFor="let link of links; let i = index"
class="div-link"
(click)="changeActiveLink(i)">
<h2>{{link}}</h2>
</div>
<div
[@indexState]="activeLink"
id="highlighter"></div>
这将导致如下结构:
<div class="div-link">
<div (click)="changeActiveLink(0)"><h2>Link 1</h2></div>
<div (click)="changeActiveLink(1)"><h2>Link 2</h2></div>
<div (click)="changeActiveLink(2)"><h2>Longer link 1</h2></div>
<div (click)="changeActiveLink(3)"><h2>Longer link 2</h2></div>
</div>
<div id="highlighter"></div>
我希望荧光笔div在activeLink = 0
时获得Link 1
的宽度.类似于这个普通的js:
I want my highlighter div to get the width of Link 1
when activeLink = 0
. Similar to this plain js:
var High = document.getElementById('highlighter');
High.style.width = document.getElementsByClass('div-link')[0].children[activeLink].offsetWidth; //activeLink = 0
在我的app.component.ts
文件中:
import { Component, AfterViewInit, ViewChildren, Directive, QueryList, ElementRef} from '@angular/core';
@Directive({selector: '[class~=div-link]'})
@Directive({selector: '.div-link'}) // variant
@Directive({selector: '#divHandle'}) // variant
@Directive({selector: '[divHandle]'}) // variant
export class ChildDirective {
constructor(elem: ElementRef){}
}
@Component({
selector: 'my-app',
...
})
export class AppComponent implements AfterViewInit {
@ViewChildren(ChildDirective) childrenContent: QueryList<ChildDirective>;
ngAfterViewInit(){
console.log(this.childrenContent);
}
}
当我登录childrenContent
时,我得到一个QueryList
对象,但它为空,没有元素可用于获取信息.
When I log the childrenContent
I get a QueryList
object, but it is empty, no elements to get info from.
我尝试了几个@Directive
选择器,但我的QueryList
始终为空.
I have tried several @Directive
selectors and always my QueryList
is empty.
推荐答案
您可以使用$ event属性处理宽度,高度,偏移量等.通过使用这种方法,传统的javascript如下发挥作用
You can use the $event property to handle the width, height, offset and so on. By using this method, a traditional javascript comes into play as below
HTML代码将为
<div *ngFor="let link of links;" class="div-link"
height="100px"
width="30px"
(click)="changeActiveLink($event)">
<h2>{{link}}</h2>
</div>
<div height="height" width="width" id="highlighter">some text</div>
将从div元素上方单击的元素处理为
Handling the clicked element from above div element as
changeActiveLink(value){
this.height=value.srcElement.parentElement.attributes['height'].value;
this.width=value.srcElement.parentElement.attributes['width'].value;
console.log(this.width);
console.log(this.height);
}
注意:在上面的示例中,click事件在字母上,因此我们将srcElement命名为h2
,因此我正在使用parentElement.您可以使用方法内部具有if条件的任何一种方式来实时处理它.
Note: In the above example, the click event is on the letter so we will get the srcElement as h2
so I am using the parentElement. In real time you can handle it with either ways having a if condition inside the method.
您还可以console.log单击的元素,并获得更多实现此想法的方法.
You can also console.log the clicked element and get more idea to achieve this.
LIVE DEMO
这篇关于获取单击的div的宽度,高度和偏移量-Angular 2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!