Разница между [ngClass] = "computeClass ()" и class = "{{computeClass ()}}" в Angular 4 - PullRequest
Новая
       6

Разница между [ngClass] = "computeClass ()" и class = "{{computeClass ()}}" в Angular 4

0 голосов
/ 28 сентября 2018

В чем разница при вычислении класса с использованием ngClass и непосредственного вычисления класса с использованием атрибута класса HTML в Angular 4.

[ngClass]="computeClass()"

и

class="{{computeClass()}}"

computeClass() {
  if (condition) {
    return 'class-a';
  } else {
    return 'class-b';
  }
}

Оба возвращают одинаковый результат.Как это влияет на производительность?

Редактировать: Мой вопрос отличается от вопроса, помеченного как дубликат, поскольку он сравнивает [ngClass] и [class], тогда как вышеупомянутое сравнение проводится между [ngClass] и class.

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

Ознакомьтесь с документацией ngClass здесь.

Из угловых документов:

Классы CSS обновляются следующим образом, в зависимости оттип вычисления выражения: 

string - the CSS classes listed in the string (space delimited) are added,
Array - the CSS classes declared as Array elements are added,
Object - keys are CSS classes that get added when the expression given in the value evaluates to a truthy value, otherwise they are

удалено.

Как видите, ngClass принимает различные типы аргументов.Если вы просто передадите строку, этот класс CSS будет присоединен к элементу HTML.Точно так же, когда вы используете интерполяцию (как упомянуто Шашикантом Девани).

Однако ngClass может сделать гораздо больше.Если вы передаете объект в примере, вы можете условно добавить несколько классов CSS.

Это работает так, если мы применим это к вашему примеру: 

computeClass() {
  return {
     "class-a": condition,
     "class-b": !condition
  };
}

Это обычный объект javascript.classA будет добавлено, только если conditionA истинно и то же самое относится к classB.Если вы хотите узнать больше о возможностях ngClass, посмотрите документацию.

0 голосов
/ 28 сентября 2018

Это class="{{computeClass()}}" или [class]="computeClass()" - это свойство связывания, оно просто принимает строковое значение в качестве имени класса или списка классов, как показано ниже 

class="class1 class2"

, и вы делаете что-то подобное 

[class]="condition ? 'class-a' : 'class-b'"

, поскольку обе причины возврата строковое значение

NgClass - это встроенная угловая директива, основанная на входных данных, установит атрибут класса, который может приниматьэтот список значений

  • строка - добавлены CSS-классы, перечисленные в строке (разделенные пробелами).
  • Array - добавлены CSS-классы, объявленные как элементы Array,
  • Object - ключи - это CSS-классы, которые добавляются, когда выражение, указанное в значении, возвращает истинное значение, в противном случае они удаляются.

пример ngClass 

[ngClass]="condition ? 'class-a' : 'class-b'"
[ngClass]="{'class-a' :condition ,'class-b':!condition"}

, если ваш случай приемлем, но некоторые сложные случаи вы найдете ngClass более вероятен для использования и рассмотрите лучшие практики для обработки добавления или удаления класса

0 голосов
/ 28 сентября 2018

Вы говорите о Interpolation и Property Binding.

И то и другое даст вам одинаковый результат.

Интерполяция

Интерполяция - этоспециальный синтаксис, который Angular преобразует в привязку свойств.Это удобная альтернатива привязке свойства.

Например: 

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
                    <h1>{{citedExample}}</h1>
                    <img src=' https://angular.io/{{imagePath}}'/>
                </div>`
})
export class AppComponent {
    citedExample: string = 'Interpolation';
    imagePath: string = 'assets/images/logos/angular/logo-nav@2x.png';
}

Привязка свойства

Привязка свойства для установки свойства элемента на-строка данных, вы должны использовать привязку свойства.

Например: 

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `<div>
    <button [disabled]='isDisabled'>Try Me</button>
                     </div>`
})
export class AppComponent {
isDisabled: boolean = true;
}

Если мы решим использовать интерполяцию вместо привязки свойства, кнопка всегда будет отключена независимо от того,для свойства класса isDisabled значение true равно false.

...