ngClass mit mehreren Ausdrücken mit einem Laufzeitklasse

Question

Child Component-Vorlage (Kind-Komponente):

<div [ngClass]="{ 'default': !inputCssClass, inputCssClass: inputCssClass }"></div> 

<div [ngClass]="{ 'default': !inputCssClass, {{inputCssClass}}: inputCssClass }"></div> 

<div [ngClass]="{ 'default': !inputCssClass, '{{inputCssClass}}': inputCssClass }"></div> 

die alle oben geben Sie mir Fehler Parser. Idee hinter dem obigen Code ist: inputCssClass ist eine Eingabeeigenschaft der Komponente.

Übergeordnete Komponente kann eine eigene Klasse definieren und als Eingabe übergeben. zum Beispiel:

div.error{ 
     color:red; 
    } 
div.success { 
    color:green; 
} 

Und statt mit allen Klassen in der untergeordneten Komponente definieren, die übergeordneten Komponenten ihre eigenen definieren und die Klassennamen übergeben an:

Stammkomponente seine Klasse definieren die untergeordnete Komponente.

<child-component inputCssClass="'error'"></child-component> 

Answer 1

`<child-component inputCssClass="error"></child-component>` 

oder

`<child-component [inputCssClass]="'error'"></child-component>` 

in Kind Vorlage:

<div [ngClass]="{ 'default': !inputCssClass, 'error': inputCssClass === 'error', 'success': inputCssClass === 'success' }"></div> 

Answer 2

Wenn Sie Child Komponente passieren Daten möchten, sollten Sie @Input Dekorateur in Kinder Komponente ts-Datei und ändern verwenden von inputCssClass="'error'" bis [inputCssClass]="'error". Also in Ihrem Fall wäre es wie folgt aussehen:

Eltern HTML-Datei

<child-component [inputCssClass]="'error'"></child-component> 

Child Komponente ts Datei

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'child-component', 
    templateUrl: './child-component.html 
}) 
export class ChildComponent { 
    constructor() { } 
    @Input() inputCssClass; 
}