Question

要获得div可滚动，我使用CSS overflow：auto。这在IE和Safari中不起作用，但仅适用于Chrome。在失败的浏览器中，我被迫在同一个DIV的CSS中放置一个固定的高度。

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

我有两个问题;

我想在应用程序启动时进行计算，而不仅仅是在调整大小事件之后。使用Angular生命周期钩子我一直得到错误的计算。我认为DOM还没有解决。
我想使用angular指令绑定到DIV的{style：height = XXpx}属性，但是我收到此错误：＆＃34; ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化。之前的价值：＆＃39;身高：728像素＆＃39;当前值：＆＃39;身高：715px＆＃39;＆＃34;

我认为恐龙是古典开发者，但在我生命的这个时刻，宝宝正在做一个Angular和javascript。我真的很感激一些帮助。

提前致谢！

在一些帮助之后编辑：

Koudela的答案帮助我找到了ngAfterViewChecked的第二遍为我提供了元素的正确属性值。现在我可以执行正确的计算并在列表中输入正确的高度。 ngAfterViewChecked适用于初始调整大小。

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

Answer 1

一个简单的resize指令：

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）溢出问题？

1 个答案: