如何修复 Angular 中的（Safari 和 IE）溢出问题？

Question

为了获得 div 可滚动，我使用 CSS overflow:auto。这在 IE 和 Safari 中不起作用，但仅在 Chrome 中起作用。在失败的浏览器中，我被迫在 DIV.

的 CSS 中放置一个固定高度

与其他许多人一样，我希望我的应用程序能够调整大小。因此，在调整大小事件上使用 offsetTop 属性和一些打字稿计算似乎可行。我直接在 DOM 中操作 DIV ，正如我在这里发现的那样，这不是最好的方法。

我有两个问题；

我想在应用程序启动时进行计算，而不仅仅是在调整大小事件之后。使用 Angular 生命周期挂钩我总是得到错误的计算。我觉得DOM还没定下来
我想使用 angular 指令绑定到 DIV 的 {style: height=XXpx} 属性，但出现此错误： "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'height: 728px'. Current value: 'height: 715px'"

将我视为 class 真正的开发者，但在我生命中的这个时刻，我是一个正在做 Angular 和 javascript 的婴儿。我真的很感激一些帮助。

提前致谢！

在一些帮助后编辑：

Koudela 的回答帮助我发现 ngAfterViewChecked 的第二遍为我提供了元素的正确属性值。现在我可以执行正确的计算并将正确的高度放入列表中。 ngAfterViewChecked 对初始和调整大小都有效。

不过我发现了新的挑战；我需要对我的应用程序中具有可滚动 div 的所有组件重复此技巧。所有 individual div 的计算都不同。我觉得为每个可滚动 div 创建一个单独的指令是不对的。此外，我想在组件本身中包含调整大小的计算代码。有没有办法从外部指令中获取对组件 class 函数的引用？

Answer 1

一个简单的调整大小指令：

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

@Directive({
    selector: '[doResize]'
})
export class DoResizeDirective implements OnInit {

    @Input('doResize') size: number;

    constructor(private el: ElementRef) { }

    ngOnInit() {
        this.doResize(null);
    }

    private doResize(size: number) {
        this.el.nativeElement.style.height = (size || this.size || 20) + 'px';
    }
}

用法：

<div [doResize]="200"></div>

示例 Plunk：http://embed.plnkr.co/thIHksY1ZzIHVCpiLmfj/

添加您的计算应该很简单。

如果您总是得到错误的计算，请使用 console.log(yourElement.clientHeight).

之类的方法检查生命周期挂钩中的各个值

考虑 ngDoCheck()、ngOnChanges() 或 @HostListener 以在初始页面加载或交互后进行更改。

官方指南：https://angular.io/guide/attribute-directives

如何修复 Angular 中的（Safari 和 IE）溢出问题？

How to fix the (Safari and IE) overflow issue in Angular?

overflow

angular