Ng-class в Angular2

Я разрабатываю тестовое приложение в angular 2, и у меня возникла проблема добавления классов на основе списка из модели.

В angular 1 можно сделать:

// model
$scope.myClasses = ['class1', 'class2', ...];

// view
... ng-class="myClasses" ...

В angular 2 все, что я смог сделать до сих пор, это:

// view
... [class.class1]="true" [class.class2]="true" ...

Это, очевидно, не очень динамично, и я уверен, что должен быть лучший способ сделать это.

Однако я также пробовал:

// model
class ... {
    private myClasses: any;
    constructor() {
        this.myClasses = ['class1', 'class2', ...];
    }

// view
... [class]="myClasses" ...

но это не сработает, я пробовал myClasses как строковое имя одного класса, массив строк, объект с ключом класса и true как значение, массив объектов такого рода, но, к сожалению, ничто из перечисленного не будет работать таким образом.

Ответы

Ответ 1

Вы должны указать CSSClass в свойстве directives @View. Проверьте этот plunk.

@Component({
    selector: 'app',
})
@View({
    template: '<div [class]="classMap">Class Map</div>',
    directives: [CSSClass]
})
class App {
    constructor() {
        this.classMap = { 'class1': true, 'class2': false };

        setInterval(() => {
            this.classMap.class2 = !this.classMap.class2;
        }, 1000)
    }
}

UPD

CSSClass было переименовано в NgClass в alpha-35. См. эту панель.

@Component({
  selector: 'app',
})
@View({
  directives: [NgClass],
  template: `
    <div [ng-class]="classMap">Class Map</div>
  `,
})
class App { /* ... */ }

Ответ 2

В соответствии с Документами API NgClass, Angular 2 примет строку, массив или объект/карту в качестве выражения для NgClass. Или, конечно, вы можете указать функцию, которая возвращает один из них.

import {Component, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  directives: [CORE_DIRECTIVES],
  template: `
    <div>
      <h2>{{title}}</h2>
      <div ngClass="gray-border purple">string of classes</div>
      <div [ngClass]="'gray-border purple'">string of classes</div>
      <div [ngClass]="['gray-border', 'green']">array of classes</div>
      <div [ngClass]="{'gray-border': true, 'blue': true}">object/map of classes</div>
      <button [ngClass]="{active: isActive}" (click)="isActive = !isActive">Click me</button>
    </div>
  `,
  styles: [`
    .gray-border {  border: 1px solid gray; }
    .blue   { color: blue; }
    .green  { color: green; }
    .purple { color: purple; }
    .active { background-color: #f55; }
  `]
})
export class App {
  title = "Angular 2 - NgClass";
  isActive = false;
}

Plunker

Если вы передаете литеральную строку, обратите внимание на два альтернативных синтаксиса:

<div ngClass="gray-border purple">string of classes</div>
<div [ngClass]="'gray-border purple'">string of classes</div>

Я считаю, что первый - это просто синтаксический сахар для второго.

И чтобы процитировать документы:

В то время как директива NgClass может интерпретировать выражения, оценивающие строка, массив или объект, наиболее часто используется версия на основе объектов используется и имеет преимущество сохранения всех имен классов CSS в шаблон.

Ответ 3

Еще один метод. [Использование тернарного оператора и интерполяции]

(Altough Mark Rajcok указал все возможные методы ngClass, но вы можете связать его с ternary operator, и вы получите else condtions)

Шаблон

<div class="hard-coded-class {{classCondition ? 'c1 c2': 'c3 c4'}}">
    Conditional classes using <b>Ternary Operator</b>
</div>

или используйте ternary operator с ngClass, посмотреть, как

TS

export class App {
  this.classCondition = false;
}

Результат

<div class="hard-coded-class c3 c4">
      Conditional classes using <b>Ternary Operator</b>
</div>

Надеюсь, что это поможет кому-то.

Ответ 4

Используя typescript и Angular 2 beta, ngClass, похоже, не работает. Из-за предварительного просмотра API - https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

template: '<div [ngClass]="classMap">Class Map</div>'

В примере из Google предусмотрены две версии кода (которые я предполагаю, это Alpha и обновлены до Beta). Новый синтаксис в примере веб-сайта, похоже, не работает... любые идеи?

@View({
    template: `
        <div class="container questions">
            <div class="row formSection">
                 <h2>
                     <div [ngClass]="completed">completed</div>
                </h2>
                <questionSection></questionSection>
            </div>
        </div>
        `,
        directives: [NgClass, QuestionSection],
})

Ответ 5

Я пытался сделать что-то подобное, у меня был список элементов меню и я хотел указать класс шрифтов для каждого элемента. Вот как я заработал. В моем компоненте typescript у меня было это:

    export class AppCmp {
       menuItems = [
         {
           text: 'Editor',
           icon: 'fa fa-pencil'
         },
         {
           text: 'Account',
           icon: 'fa fa-user'
         },
         {
           text: 'Catalog',
           icon: 'fa fa-list'
         }
      ]
    }

Затем в моем html:

  <div *ngFor="#item of menuItems; #index = index">
        <i [attr.class]="item.icon"></i>
        <span>{{ item.text }}</span>
  </div>

Вот плункер, https://plnkr.co/edit/PIDRZsc7ZhISNgZzOWuY?p=preview Надеюсь, что поможет