javascript - navigationend - router events subscribe angular 4

¿Cómo agregar un atributo condicional en Angular 2?

Question

¿Cómo puedo agregar condicionalmente un atributo de elemento, por ejemplo, el checked de una casilla de verificación?

Las versiones anteriores de Angular tenían NgAttr y creo que NgChecked que parecen proporcionar la funcionalidad que busco. Sin embargo, estos atributos no parecen existir en Angular 2 y no veo otra forma de proporcionar esta funcionalidad.

Answer 1

Los mapas en línea también son útiles.

También son un poco más explícitos y legibles.

[class]="{ ''true'': ''active'', ''false'': ''inactive'', ''true&false'': ''some-other-class'' }[ trinaryBoolean ]"

Solo otra forma de lograr lo mismo, en caso de que no le guste la sintaxis ternaria o ngIf s (etc.).

Answer 2

Puedes usar esto.

<span [attr.checked]="val? true : false"> </span>

Answer 3

Refinando la respuesta de Günter Zöchbauer:

Esto parece ser diferente ahora. Estaba tratando de hacer esto para aplicar condicionalmente un atributo href a una etiqueta de anclaje. Debe usar undefined para el caso ''no aplicar''. Como ejemplo, demostraré con un enlace que tiene un atributo href aplicado condicionalmente.

Una etiqueta de anclaje sin un atributo href se convierte en texto sin formato, lo que indica un marcador de posición para un enlace, según la especificación del hipervínculo .

Para mi navegación, tengo una lista de enlaces, pero uno de esos enlaces representa la página actual. No quería que el enlace de la página actual fuera un enlace, pero todavía quiero que aparezca en la lista (tiene algunos estilos personalizados, pero este ejemplo está simplificado).

<a [attr.href]="currentUrl !== link.url ? link.url : undefined">

Esto es más limpio que usar dos * ngIf en una etiqueta de intervalo y ancla, creo.

Answer 4

Si se trata de un elemento de entrada, puede escribir algo como ... <input type="radio" [checked]="condition"> El valor de la condición debe ser verdadero o falso.

También para atributos de estilo ... <h4 [style.color]="''red''">Some text</h4>

Answer 5

en la sintaxis del atributo angular-2 es

<div [attr.role]="myAriaRole">

Vincula el rol de atributo al resultado de la expresión myAriaRole.

así que puede usar como

[attr.role]="myAriaRole ? true: null"

Answer 6

null elimina:

[attr.checked]="value ? '''' : null"

o

[attr.checked]="value ? ''checked'' : null"