En React, puedo hacer algo como esto en mi JSX:
loggedIn ? <Avatar /> : <SignInButton />Ahora pasando a Angular (para el trabajo, así que tengo que usarlo), obviamente los paradigmas son diferentes, pero ¿hay una manera limpia de hacer esto? Lo mejor que he visto es:
<ng-container *ngIf="user$ | async as loggedIn; else signInButtonTemplate"> <application-avatar></application-avatar> </ng-container> <ng-template #signInButtonTemplate> <application-sign-in-button></application-sign-in-button> </ng-template>Este método desconecta inherentemente la lógica condicional y, por lo general, separa aún más las plantillas de la condición real porque la mayoría de los desarrolladores lo colocan en la parte inferior del archivo para que el resto del diseño sea más fácil de leer. No está limpio y es tan detallado que es frustrante a diario.
Esperaba poder crear un componente (o directiva no estoy seguro) como:
<if-else [condition]="loggedIn"> <avatar #if></avatar> <sign-in-button #else></sign-in-button> </if-else> y hacer que en realidad no represente el elemento contenedor <if-else> y solo uno de los dos elementos secundarios en función de una condición. Podríamos usar esto en todas partes en nuestra base de código en lugar del estilo *ngIf . La lógica condicional y los casos positivo y negativo están contenidos en un bloque. En mi opinión, esto es mucho más limpio y tenía curiosidad si algo así era posible con Angular, y si es así, ¿cuál es la mejor manera de hacerlo?
¿Quizás un interruptor está más cerca de lo que quieres?
<ng-container [ngSwitch]="loggedIn"> <application-avatar *ngSwitchCase="true"></application-avatar> <application-sign-in-button *ngSwitchCase="false"></application-sign-in-button> </ng-container>bueno, puedes crear un componente como
@Component({ selector: 'if-else', template:` <ng-content *ngIf="condition" select="[if]"></ng-content> <ng-content *ngIf="!condition" select="[else]"></ng-content> ` }) export class IfElseComponent { @Input() condition }usas como
<if-else [condition]="condition"> <hello if [name]="name"></hello> <by else [name]="name"></by> </if-else>Ver un tonto stackblitz
Actualizar
Si usamos como selector [if-else]
@Component({ selector: '[if-else]', ... ` }) Puede usar en cualquier etiqueta html, por ejemplo, div o section o...
<div if-else [condition]="contition"> ... </div>Pero todavía tienes una etiqueta "extra"