获取点击的 div 的宽度、高度和偏移量 - Angular 2 [英] Get the width, height and offset of clicked div - Angular 2

问题描述

我有一个模板，它使用 *ngFor 和一个单独的 div 元素创建链接列表，我想根据当前活动链接更改其位置.

模板:

<h2>{{link}}</h2>

结果是这样的结构:

<div (click)="changeActiveLink(0)"><h2>链接 1</h2></div><div (click)="changeActiveLink(1)"><h2>链接 2</h2></div><div (click)="changeActiveLink(2)"><h2>较长的链接 1</h2></div><div (click)="changeActiveLink(3)"><h2>较长的链接 2</h2></div>
<div id="highlighter"></div>

我希望我的荧光笔 div 在 activeLink = 0 时获得 Link 1 的宽度.类似于这个普通的js:

var High = document.getElementById('highlighter');High.style.width = document.getElementsByClass('div-link')[0].children[activeLink].offsetWidth;//活动链接= 0

在我的 app.component.ts 文件中:

import { Component, AfterViewInit, ViewChildren, Directive, QueryList, ElementRef} from '@angular/core';@Directive({选择器: '[class~=div-link]'})@Directive({selector: '.div-link'})//变体@Directive({selector: '#divHandle'})//变体@Directive({selector: '[divHandle]'})//变体导出类 ChildDirective {构造函数(元素:ElementRef){}}@成分({选择器:'我的应用'，...})导出类 AppComponent 实现 AfterViewInit {@ViewChildren(ChildDirective) childrenContent: QueryList;ngAfterViewInit(){console.log(this.childrenContent);}}

当我记录 childrenContent 时，我得到一个 QueryList 对象，但它是空的，没有可从中获取信息的元素.

我尝试了几个 @Directive 选择器，但我的 QueryList 总是为空.

解决方案

您可以使用 $event 属性来处理宽度、高度、偏移量等.使用这种方法，一个传统的javascript就发挥作用了，如下

HTML 代码将作为

<h2>{{link}}</h2>
<div height="height" width="width" id="highlighter">一些文字</div>

处理来自 div 元素上方的点击元素

changeActiveLink(value){this.height=value.srcElement.parentElement.attributes['height'].value;this.width=value.srcElement.parentElement.attributes['width'].value;控制台日志(this.width)；控制台日志(this.height)；}

注意:在上面的例子中，点击事件发生在 letter 上，所以我们将得到 srcElement 作为 h2 所以我使用 parentElement.在实时情况下，您可以通过在方法中使用 if 条件的任何一种方式来处理它.

您还可以对点击的元素进行 console.log 并获得更多想法来实现这一点.

现场演示

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.

Template:

<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>

This results in a structure like so:

<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>

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

In my app.component.ts file:

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

When I log the childrenContent I get a QueryList object, but it is empty, no elements to get info from.

I have tried several @Directive selectors and always my QueryList is empty.

解决方案

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 code will be as

<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>

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

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.

You can also console.log the clicked element and get more idea to achieve this.

LIVE DEMO

这篇关于获取点击的 div 的宽度、高度和偏移量 - Angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！