admin管理员组

文章数量:1426648

I read the last couple of hours about Event Listener in Angular 2 but I think there is a big lack of documentation there.

I want to set the height of different div groups (created in ngFor) to the one with the biggest height. Kinda like in Angular 1 example

I know that scope and $watch do not exist anymore. So I try to do it with Host Listener, but I cant find any good documentation for it. There are many tutorials for events "click", "mouseover" etc. But none for other possible events. I need something like $watch or onChange. (No input fields, basic elements) Basiclly any documentation about the possible event names would help.

Eventually there is also an example of the above link in angular2.

PS: Found 'window: resize' but 'div: resize' not working.

EDIT: With the help of maximus I got it done, here is the working code.

Created a directives file:

ments.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
import { DoCheck } from '@angular/core';

@Directive({ selector: '[ments]' })

export class CommentsDirective implements DoCheck{

    style: any;

    constructor(private element: ElementRef) {

    }

    ngDoCheck() {
        console.log(this.element);
        this.style = { //scope variable style, shared with our controller
            height:this.element.nativeElement.offsetHeight+'px', //set the height in style to our elements height
            width:this.element.nativeElement.offsetWidth+'px' //same with width
        };
    }
}

Than I just imported it in NG-Module.

HTML Part:

<div ments [ngStyle]="style">

If I done the part with making it all equal height, based on the biggest, I will update it.

I read the last couple of hours about Event Listener in Angular 2 but I think there is a big lack of documentation there.

I want to set the height of different div groups (created in ngFor) to the one with the biggest height. Kinda like in Angular 1 example

I know that scope and $watch do not exist anymore. So I try to do it with Host Listener, but I cant find any good documentation for it. There are many tutorials for events "click", "mouseover" etc. But none for other possible events. I need something like $watch or onChange. (No input fields, basic elements) Basiclly any documentation about the possible event names would help.

Eventually there is also an example of the above link in angular2.

PS: Found 'window: resize' but 'div: resize' not working.

EDIT: With the help of maximus I got it done, here is the working code.

Created a directives file:

ments.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';
import { DoCheck } from '@angular/core';

@Directive({ selector: '[ments]' })

export class CommentsDirective implements DoCheck{

    style: any;

    constructor(private element: ElementRef) {

    }

    ngDoCheck() {
        console.log(this.element);
        this.style = { //scope variable style, shared with our controller
            height:this.element.nativeElement.offsetHeight+'px', //set the height in style to our elements height
            width:this.element.nativeElement.offsetWidth+'px' //same with width
        };
    }
}

Than I just imported it in NG-Module.

HTML Part:

<div ments [ngStyle]="style">

If I done the part with making it all equal height, based on the biggest, I will update it.

• javascript
• css
• angular

Share Improve this question Follow edited Jun 12, 2017 at 8:53 Doomenik asked Jun 12, 2017 at 7:39 DoomenikDoomenik 86611 gold badge1414 silver badges3030 bronze badges 5

• have you looked at mutationobservers - developer.mozilla/en/docs/Web/API/MutationObserver ? – glendaviesnz Commented Jun 12, 2017 at 7:48
• It's unlikely that you want or need to do this at all. Essentially, you are trying to manage page layout, but that's the job of HTML and CSS. If you can provide a simplified example of what you want to do, I'm sure someone here can help show you how to do it in CSS. – user663031 Commented Jun 12, 2017 at 7:55
• @torazaburo I know that this is normally a part of css and in a normal case easily possible with eg. flex-box. In my situation the page layout is pretty based on the retrieving of the data I retrieve from a database. So I have to change the layout based on the recived elements. Example: 3 colums, each contains ments, news and something else(in separate rows). Based on the block with the most ments, the ment box of all should be same height. – Doomenik Commented Jun 12, 2017 at 8:09
• See stackoverflow./questions/16594891/…. – user663031 Commented Jun 12, 2017 at 9:11
• They dont have the same parent. Works anyway dont worry. – Doomenik Commented Jun 12, 2017 at 9:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I know that scope and $watch do not exist anymore

Angular.js triggers watchers when it runs digest. Angular has something similar, it triggers ngDoCheck when it runs digest. Read more here.

Taking the analogy with the example you shown for Angular.js you can do something along these lines in Angular:

@Directive({
   selector: '[HeightSetter]'
})
class HeightSetter {
   style: any;

   constructor(private element: elementRef) {

   }

   ngDoCheck() {
     this.style = { //scope variable style, shared with our controller
         height:this.element.nativeElement.offsetHeight+'px', //set the height in style to our elements height
         width:this.element.nativeElement.offsetWidth+'px' //same with width
     };
   }
}

html

<span HeightSetter [ngStyle]="style"></span>

本文标签： javascriptAngular 2 Host Listener Change div heigthtStack Overflow