在 RC4 上完成绑定后，Angular2 AfterViewChecked 不会触发指令 [英] Angular2 AfterViewChecked not firing on a directive when binding is complete on RC4

问题描述

我有一个 Angular 2 指令，当表被放置在可滚动的 div 中时，它使给定表的标题 (th) 保持固定.它根据单元格上数据的大小调整列标题的大小，反之亦然.它在 Angular 2 RC1 之前运行良好，但在我将其升级到 RC4 后它停止工作.

I have an Angular 2 directive that makes the header (th) of a given table to remain fixed when the table is placed within a scrollable div. It resizes the column headers according to the size of the data on the cells, and vice-versa. It was working fine until Angular 2 RC1, but after I upgraded it to RC4 it stopped working.

一段时间后，我意识到框架触发的AfterViewChecked"事件数量减少了，可能是由于问题已修复.现在的问题是我的指令不再触发它的重新计算逻辑来调整表头的大小.

After a while I realized that the number of "AfterViewChecked" events triggered by the framework has been reduced, probably due to an issue that got fixed. The problem now is that my directive is no longer triggering its recalculation logic to resize the table headers.

是否可以从父指令表中绑定或捕获事件以触发重新计算过程?

指令代码大致是这样的:

The directive code is more or less like this:

export class TableFixedHeaderDirective implements AfterViewChecked, AfterViewInit
...
ngAfterViewInit(): void ...
ngAfterViewChecked(): void ...
onWindowResize(): void ...
...

在这些事件中，我调用逻辑来执行标题计算，这基本上会根据显示的数据的宽度调整标题或列的大小.

Within these events is where I call the logic to perform the header calculation, which will basically resize either headers or columns, depending on the width of the data being displayed.

推荐答案

Angular 指令没有 View，因此所有与视图相关的生命周期钩子都不会工作，因为它们不存在.

An angular directive does not have a View so all of the view related lifecycle hooks will not work, since they don't exist.

请参阅文档

ngOnInit
在 Angular 初始化数据绑定输入属性之后初始化指令/组件.

ngOnInit
Initialize the directive/component after Angular initializes the data-bound input properties.

ngOnChanges在 Angular 设置数据绑定输入属性后响应.该方法接收当前值和先前值的更改对象.

ngOnChanges Respond after Angular sets a data-bound input property. The method receives a changes object of current and previous values.

ngDoCheck
检测 Angular 可以或不会自行检测到的变化并采取行动.调用每次更改检测运行.

ngDoCheck
Detect and act upon changes that Angular can or won't detect on its own. Called every change detection run.

ngOnDestroy在 Angular 销毁指令/组件之前进行清理.取消订阅 observable 并分离事件处理程序以避免内存泄漏.

ngOnDestroy Cleanup just before Angular destroys the directive/component. Unsubscribe observables and detach event handlers to avoid memory leaks.

ngAfterContentInit
在 Angular 将外部内容投影到其视图中之后.

ngAfterContentInit
After Angular projects external content into its view.

ngAfterContentChecked
在 Angular 检查它投射到其视图中的外部内容的绑定之后.​​

ngAfterContentChecked
After Angular checks the bindings of the external content that it projected into its view.

ngAfterViewInit在 Angular 创建组件的视图之后.

ngAfterViewInit After Angular creates the component's view(s).

ngAfterViewChecked
在 Angular 检查组件视图的绑定之后.​​

ngAfterViewChecked
After Angular checks the bindings of the component's view(s).

这篇关于在 RC4 上完成绑定后，Angular2 AfterViewChecked 不会触发指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！