Как установить условие в ngstyle или ngclass - PullRequest
Новая
       37

Как установить условие в ngstyle или ngclass

0 голосов
/ 13 января 2020

У меня есть 2 разные страницы, на которых будут отображаться одни и те же данные, и обе они используют одни и те же компоненты. Но обе страницы имеют разное разрешение: размер с окном предупреждения и размер А4. Как установить Dynami c Высота и ширина для них. Я пытался использовать ngstyle, не уверен, как правильно его реализовать в обычном режиме html

<tbody class="classname" style="height: 60px; width: fit-content;"> Я добавил это, и оно работает, но обе страницы имеют одинаковое разрешение.

так что с ngstyle я попробовал это снова, то же самое, что обе страницы были установлены на то же самое 60

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

или это там Любое решение с использованием ngclass?

1 Ответ

0 голосов
/ 13 января 2020

Итак, ваша проблема разбита на два этапа. Один - вычислить высоту страницы , которая не является полем angular, а скорее , определяемой браузером c. Хотя браузеры действительно предоставляют свойства clientHeight или scrollHeight , но существует разница в том, как разные браузеры понимают фактическую высоту страницы.

Таким образом, лучшая практика (так как она также используется известной библиотекой jQuery) - это получить различные свойства высоты уровня документа и получить из них максимальное значение.

Вам потребуется ввести константу DOCUMENT , чтобы получить доступ к документу DOM в вашем компоненте. Пожалуйста, найдите приведенный ниже пример angular код компонента. 

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 вы можете проверить свойство высоты компонента и применить стиль по желанию. Примерно так ... 

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

Спасибо.

...