Classname dinâmico dentro da ngClass em angular 2
eu tentei esta solução que são os únicos que fazem sentido para mim, estes dois falham com a interpolação:
<button [ngClass]="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
<button [ngClass]="{namespace + '-mybutton': type === 'mybutton'}"></button>
este funciona com a interpolação, mas falha com a classe dinamicamente adicionada porque toda a cadeia é adicionada como uma classe:
<button ngClass="{'{{namespace}}-mybutton': type === 'mybutton'}"></button>
então a minha pergunta é: como é que se usam nomes dinâmicos de classes em ngClass
assim?
2 answers
Tenta
<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>
Em vez disso.
Ou
<button [ngClass]="[type === 'mybutton' ? namespace + '-mybutton' : '']"></button>
Ou mesmo
<button class="{{type === 'mybutton' ? namespace + '-mybutton' : ''}}"></button>
Irá funcionar, mas o benefício extra de utilizar ngClass é que ele não substitui outras classes, que são adicionados por qualquer outro método( ex: [class.xyz]
directiva ou class
atributo, etc.) como class
faz.
NgClass toma três tipos de entrada
-
objecto: cada tecla corresponde a um nome de classe CSS, não pode ter teclas dinâmicas, porque
key
'key'
"key"
são todos iguais, e[key]
não é suportado em AFAIK. - matriz: só pode conter uma lista de classes, sem condições, embora o operador ternário trabalhe
- String / expression: just like normal class attribute
<button [ngClass]="{[namespace + '-mybutton']: type === 'mybutton'}"></button>
Mas o Angular lança nesta sintaxe. Eu consideraria isto um insecto. Ver também https://stackoverflow.com/a/36024066/217408
Os outros são inválidos. Não pode utilizar[]
em conjunto com {{}}
. Uma ou outra. {{}}
Liga o resultado que não leva ao resultado desejado neste caso porque um objeto precisa ser passado para ngClass
.
Exemplo do Plunker
Como resultado da sintaxe mostrado por @A_Sing ou
<button [ngClass]="type === 'mybutton' ? namespace + '-mybutton' : ''"></button>
Pode ser utilizado.