Angular 2 Host Listener Change div heigtht

Question

Angular 2 Host Listener Change div heigtht

1

Я прочитал последние пару часов о прослушивании событий в Angular 2, но я думаю, что там большая нехватка документации.

Я хочу установить высоту различных групп div (созданных в ngFor) на ту, которая имеет наибольшую высоту. Например, в примере с угловым 1

Я знаю, что масштаб и $watch больше не существуют. Поэтому я пытаюсь сделать это с помощью Host Listener, но я не могу найти для него хорошую документацию. Существует множество обучающих программ для событий "click", "mouseover" и т.д. Но для других возможных событий нет. Мне нужно что-то вроде $ watch или onChange. (Нет полей ввода, базовых элементов). В основном любая документация о возможных именах событий помогла бы.

В конце концов, есть также пример вышеупомянутой ссылки в угловом2.

PS: найдено 'window: resize' но 'div: resize' не работает.

EDIT: с помощью maximus я сделал это, вот рабочий код.

Создал файл директив:

comments.directive.ts

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

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

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

Затем я просто импортировал его в NG-Module.

Часть HTML:

<div comments [ngStyle]="style">

Если бы я сделал часть с тем, чтобы сделать ее равной равной высоте, основанной на самой большой, я ее обновлю.

Doomenik 12 июнь 2017, в 10:27

Источник

Теги:

angular

javascript

css

1 ответ

Ещё вопросы

Max Wizard K · Accepted Answer · 2017-06-12T04-59-00.000Z

Я знаю, что масштаб и часы больше не существуют

Angular.js запускает наблюдателей, когда он запускает дайджест. Угловое имеет что-то подобное, оно вызывает ngDoCheck когда он запускает дайджест. Подробнее читайте здесь.

По аналогии с примером, показанным для Angular.js вы можете сделать что-то вдоль этих линий в 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>

Получилось, замените <span [HeightSetter] [ngStyle] = "style"> </ span> на <span HeightSetter [ngStyle] = "style"> </ span>