Question

以下是我们在angularjs中给出动态体型的代码。

  $scope.$on('$viewContentLoaded', function(event) {
                var biggestHeight = 0;
                var height = 0;
                $(".screen").find('*').each(function(){
                    height = $(this).position().top + $(this).height() + 100;
                    if (height > biggestHeight ) {
                        biggestHeight = height;
                    }
                });
                $(".screen").height(biggestHeight);
            });

如何在angular2中使用它？

这是简单的屏幕代码

<div class="screen">
 <form class="form-horizontal" role="form">
 <button type="submit" class="generated-button" (click)="NotImplemented" style="position: absolute;width: 67px;height: 35px;left: 356px;top: 311px;">Button</button>
 </form>
 </div>

这是简单的html代码，这里我们有很多输入。我们希望在输入列表中获得最高位置并将高度设置为屏幕

Answer 1

要在angular2中重新实现此功能，您可以使用元素属性绑定支持https://angular.io/docs/ts/latest/guide/template-syntax.html#!#attribute-binding

您可以直接计算身高并设置：

<app-some-element [height]="height"></app-some-element>

或

<div class="screen" #screen>
 ...
</div>

可以在组件

中计算height

ngAfterViewInit() {
  this.height = ...;
}

如果您需要将此高度设置为某个子元素 - 您始终可以使用@ViewChild()指令来获取元素引用

@ViewChild('screen')
screen

所以你的代码将是

ngAfterViewInit() {
  var childs = this.screen.nativeElement.children; 
  //or querySelectorAll('*') to get all elements in tree

  for(var i=0; i<childs.length; i++) {
     //calculate child biggest height
  }

  this.screen.nativeElement.height = ...;
}

希望这有帮助。

动态体型以angular2为单位

1 个答案: