如何解决Angular中的（Safari和IE）溢出问题？

问题描述：

为了得到一个div可滚动我使用CSS溢出：自动。这不适用于IE和Safari，但只适用于Chrome。在失败的浏览器中，我不得不在同一个DIV的CSS中放置一个固定的高度。如何解决Angular中的（Safari和IE）溢出问题？

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

我有2个问题;

我想在应用程序启动时进行计算，而不是在调整大小事件后进行计算。使用Angular生命周期钩子，我不断计算错误。我认为DOM还没有定下来。
我想绑定到带有角度指令的DIV的{style：height = XXpx}属性，但是我得到这个错误： “ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改上一个值：'height： 728px”。当前值：‘高度：715px’”

认为我是个恐龙古典开发者，但婴儿做角和JavaScript在这一刻我的生活。我真的很感谢一些帮助。

在此先感谢！

编辑一些后帮：

Koudela的答案帮了我很大的发现自己的ngAfterViewChecked的第二次与该元件的正确的属性值提供给我。现在我可以执行正确的计算并将正确的高度放在列表中。 ngAfterViewChecked用于初始化和调整大小。

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

“我想我的应用程序能够调整”你尝试媒体查询？ – Vega

@Vega谢谢Vega，但媒体查询不够线性。使用flexboxes除了可滚动区域之外，一切都像魅力一样。 – wilcotroost

随着重新计算你可以调整divs，但你如何管理元素的位置，布局？例如，如果是用于电话风景或肖像演示文稿，我会在div上移动吗？这不是太多工作吗？ – Vega

答

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

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>

例普拉克：http://embed.plnkr.co/thIHksY1ZzIHVCpiLmfj/

将您的计算应是直线前进。

如果您继续得到错误的计算结果，请使用console.log(yourElement.clientHeight)之类的东西检查生命周期钩子中的各个值。

考虑ngDoCheck（），ngOnChanges（）或@HostListener的初始页面加载或交互后的更改。

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

谢谢Koudela！你给了我一个正确的方向的详细推动。使用你的指令，我发现ngAfterViewChecked的第二遍提供了我可以用于计算的正确的offsetHeight。它向我提出了一个新的挑战，我将用对原始问题的编辑来描述。 – wilcotroost

如何解决Angular中的（Safari和IE）溢出问题？

相关推荐