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.