0

我有 2 个不同的页面将显示相同的数据，并且两者都共享相同的组件。但是这两个页面的分辨率不同，一个是带有警告框的大小，一个是类似的 A4 大小。如何为它们设置动态高度和宽度。我尝试使用 ngstyle 不确定如何在普通 html 中正确实现它

<tbody class="classname" style="height: 60px; width: fit-content;"> 我添加了这个并且它可以工作，但是两个页面都采用相同的分辨率。

所以使用 ngstyle 我再次尝试了同样的事情，两个页面都设置为相同的 60

[ngStyle]="{'height.px': 'Height' ? '60' : '200' }"

或者它有任何使用ngclass的解决方案？

4

1 回答 1

0

因此，您的问题分为两个步骤。一种是计算页面高度，这不是角度字段，而是特定于浏览器的问题。尽管浏览器确实公开了clientHeight或scrollHeight属性，但是不同的浏览器如何理解页面的实际高度是有区别的。

所以最佳实践（著名的jQuery库也使用它）是获取不同的文档级高度属性并从中获取最大值。

您必须注入DOCUMENT常量才能将 DOM 文档访问到您的组件中。请找到以下示例角度组件代码。

import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  public height = 0;

  constructor(@Inject(DOCUMENT) private document: any){
  }
  ngOnInit() {
    this.height = Math.max( this.document.body.scrollHeight, this.document.body.offsetHeight, 
                      this.document.documentElement.clientHeight, this.document.documentElement.scrollHeight, this.document.documentElement.offsetHeight );


  }

}

现在只需在 html 端，您就可以测试组件的height 属性并根据需要应用样式。有人这样想。。

<div [ngStyle]="{'height': height>=200 ? '200px' : '60px' }"></div>

谢谢。

于 2020-01-13T16:50:36.807 回答