content typescript angular typescript1.5

typescript - content - clase ng en Angular2



ng-content angular 5 (5)

De acuerdo con los documentos de NgClass API , Angular 2 aceptará una cadena, una matriz o un objeto / mapa como expresión de NgClass. O, por supuesto, puede especificar una función que devuelva uno de esos.

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 está pasando una cadena literal, tenga en cuenta las dos sintaxis alternativas:

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

Creo que el primero es solo azúcar sintáctico para el segundo.

Y para citar los documentos:

Si bien la directiva NgClass puede interpretar expresiones que evalúan a cadena, matriz u objeto, la versión basada en objetos es la más utilizada y tiene la ventaja de mantener todos los nombres de clase CSS en una plantilla.

Estoy desarrollando una aplicación de prueba en angular 2 y estoy atascado con el problema de agregar clases basadas en la lista del modelo.

En Angular 1 uno podría hacer:

// model $scope.myClasses = [''class1'', ''class2'', ...]; // view ... ng-class="myClasses" ...

En Angular 2, todo lo que he podido hacer hasta ahora es:

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

Lo cual obviamente no es muy dinámico y estoy seguro de que debe haber una mejor manera de hacerlo.

Sin embargo, también he intentado:

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

pero esto no funciona, he intentado myClasses como un nombre de cadena de una sola clase, matriz de cadenas, objeto con una clave classname y true como un valor, una matriz de objetos de este tipo, pero lamentablemente, nada de lo enumerado trabaja de esta manera


Debe especificar CSSClass en las directives propiedad de @View decorator. Mira esto.

@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 se renombró a NgClass en alpha-35. Ver este plunk

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


Estaba tratando de hacer algo similar, tenía una lista de elementos del menú y quería especificar una clase fontawesome para cada artículo. Así es como lo hice funcionar. En mi componente mecanografiado tuve esto:

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

Luego en mi html:

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

Aquí está el plunker, https://plnkr.co/edit/PIDRZsc7ZhISNgZzOWuY?p=preview Espero que ayude


Usando mecanografiado y Angular 2 beta, ngClass no parece funcionar. De seguir la vista previa de la API: https://angular.io/docs/ts/latest/api/common/NgClass-directive.html

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

El ejemplo de Google proporciona dos versiones de código (que supongo que es Alpha y se actualizó a Beta). La nueva sintaxis en el ejemplo del sitio web no parece funcionar ... ¿Alguna idea?

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


Un método más [Uso del operador ternario y la interpolación]

( Mark Rajcok declaró todos los métodos posibles de ngClass , pero puedes acoplarlo con un ternary operator y obtienes else )

Modelo

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

o use un ternary operator con ngClass , vea cómo

TS

export class App { this.classCondition = false; }

Resultado

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

Espero que ayude a alguien.