web-dev-qa-db-fra.com

ng-class dans Angular2

Je développe une application de test en angular 2 et je suis bloqué par un problème d’ajout de classes en fonction de la liste du modèle.

Dans Angular 1 on pourrait faire:

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

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

Dans Angular 2, tout ce que j'ai pu faire jusqu'ici est:

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

Ce qui n’est évidemment pas très dynamique et je suis sûr qu’il doit y avoir un meilleur moyen de le faire.

Cependant, j'ai aussi essayé:

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

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

mais cela ne fonctionne pas, j'ai essayé myClasses comme nom de chaîne d'une seule classe, tableau de chaînes, objet avec une clé de nom de classe et true comme valeur, tableau d'objets de ce type, mais malheureusement , rien d’énuméré ne fonctionnera de cette façon.

typescriptangulartypescript1.5
34
Marko Grešak

Vous devez spécifier CSSClass dans directives propriété de @View décorateur. Découvrez ceci 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 [~ # ~]

CSSClassa été renommé à NgClass en alpha-35. Voir this plunk

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

Selon les docs de l'API NgClass , Angular 2 acceptera une chaîne, un tableau ou un objet/une mappe comme expression de NgClass. Ou bien sûr, vous pourrait spécifier une fonction qui renvoie l'un de ceux-ci.

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

Si vous passez une chaîne littérale, notez les deux syntaxes alternatives:

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

Je crois que le premier n'est que du sucre syntaxique pour le second.

Et pour citer les docs:

Bien que la directive NgClass puisse interpréter des expressions évaluant des chaînes, des tableaux ou des objets, la version à base d’objets est la version la plus utilisée et présente l’avantage de conserver tous les noms de classes CSS dans un modèle.

39
Mark Rajcok

Une méthode supplémentaire [Opérateur ternaire et interpolation]

(Altough Mark Rajcok A déclaré toutes les méthodes ngClass possibles, mais vous pouvez l'associer à ternary operator Et vous obtenez else condtions)

Modèle

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

ou utilisez ternary operator avec ngClass, voyez comment

TS

export class App {
  this.classCondition = false;
}

Résultat

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

J'espère que ça aide quelqu'un.

21
Ankit Singh

Utilisation de TypeScript et Angular 2 bêta, ngClass ne semble pas fonctionner. Si vous suivez l'aperçu de l'API - https://angular.io/docs/ts/latest/api/ common/NgClass-directive.html

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

L'exemple de Google fournit deux versions de code (qui, je suppose, est alpha et mis à jour en version bêta). La nouvelle syntaxe dans l'exemple de site Web ne semble pas fonctionner ... des idées?

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

J'essayais de faire quelque chose de similaire, j'avais une liste d'éléments de menu et je voulais spécifier une classe fontawesome pour chaque élément. Voici comment je l'ai fait fonctionner. Dans mon composant TypeScript, j'avais ceci:

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

Puis dans mon html:

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

Voici le plunker, https://plnkr.co/edit/PIDRZsc7ZhISNgZzOWuY?p=preview J'espère que cela vous aidera

1
Will