comments.directive.ts

Question

我在Angular 2中阅读了关于事件监听器的最后几个小时，但我认为那里缺少文档。

我想将不同div组（在ngFor中创建）的高度设置为具有最大高度的div组。有点像Angular 1 example

我知道范围和$watch不再存在。所以我尝试用Host Listener来做，但我找不到任何好的文档。有很多关于事件"click"，"mouseover"等的教程。但是没有其他可能的事件。我需要像$ watch或onChange这样的东西。（没有输入字段，基本元素）基本上任何有关可能的事件名称的文档都会有所帮助。

最终在angular2中还有一个上述链接的例子。

PS：找到'window: resize'，但'div: resize'无效。

编辑：在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">

如果我完成了所有相同高度的部分，基于最大值，我会更新它。

Answer 1

我知道范围和$ watch不再存在

Angular.js在运行摘要时触发观察者。 Angular有类似的东西，它在运行摘要时会触发ngDoCheck。阅读更多here。

与您在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>

Angular 2主机监听器改变div heigtht

comments.directive.ts

1 个答案:

HTML