ngClass с несколькими выражениями с классом времени выполнения

Шаблон дочернего компонента (дочерний компонент):

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

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

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

Все вышесказанное дает мне ошибки парсера. Идея приведенного выше кода такова: inputCssClass - это входное свойство компонента.

Родительский компонент может определять свой собственный класс и передавать его в качестве входных данных. Например:

родительский компонент может определить свой класс как:

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

И вместо того, чтобы определять все классы в дочернем компоненте, родительские компоненты могут определять свои собственные и передавать имя класса дочернему компоненту.

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

angular ng-class
person Sirish Kumar    schedule 16.05.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если вы хотите передать данные в дочерний компонент, вы должны использовать декоратор @Input в ts-файле дочернего компонента и изменить значение с inputCssClass="'error'" на [inputCssClass]="'error". Итак, в вашем случае это будет выглядеть так:

Родительский файл HTML

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

ts-файл дочернего компонента

import { Component, Input } from '@angular/core';
@Component({
    selector: 'child-component', 
    templateUrl: './child-component.html
})
export class ChildComponent {
   constructor() { }
   @Input() inputCssClass;
}
person Patryk Brejdak    schedule 16.05.2017
comment
Благодарность!. Что насчет шаблона ChildComponent? Кажется, что ни один из 3 синтаксисов не работает. - person Sirish Kumar; 22.05.2017
comment
Хм, а нужно добавить n классов или это предопределенное число? - person Patryk Brejdak; 23.05.2017
comment
Если это предопределенное количество возможных классов, вы можете просто использовать [ngClass]=" inputCssClass ? inputCssClass : 'default' "; это означает, что если inputCssClass является значением true, он назначит значение inputCssClass, в противном случае будет назначен класс по умолчанию. - person Patryk Brejdak; 23.05.2017

arrow_upward
0
arrow_downward 

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

or

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

в дочернем шаблоне:

<div [ngClass]="{ 'default': !inputCssClass, 'error': inputCssClass === 'error', 'success': inputCssClass === 'success' }"></div>
person El houcine bougarfaoui    schedule 16.05.2017
comment
Благодарность!. Что насчет шаблона ChildComponent? Кажется, что ни один из 3 синтаксисов не работает. - person Sirish Kumar; 22.05.2017