web-dev-qa-db-fra.com

comment afficher au mieux les modèles conditionnels en mode angulaire 4

actuellement, je suis pratiqué de manière angulaire 4. lorsqu'un utilisateur normal affiche ceci puis affiche un contenu public Lorsqu'un utilisateur enregistré entre dans la page Web puis affiche le contenu modifié ou le contenu. comment appliquer les meilleures pratiques au modèle conditionnel ou à un contenu HTML, par exemple:

<div *ngIf="isUser">
    some Content  here......
</div>
<div *ngIf="!isUser">
    some Content here .....
</div>

en fait, je veux savoir comment aller au mieux.

angularangular-template
5
Md. Abu Sayed

Dans angular 4, vous pouvez utiliser if .. else .. structure pour les modèles html

Vous pouvez l'utiliser de cette façon:

<div *ngIf="isUser; else otherContent">
    some Content  here......
</div>
<ng-template #otherContent>
    <div>
        some Content here .....
    </div>
</ng-template>

mais dans votre cas, les plus jolies solutions seront si ... alors ... sinon ... conditionnel

<ng-container *ngIf="isUser; then someContent else otherContent"></ng-container>

<ng-template #someContent ><div>some content...</div></ng-template>
<ng-template #otherContent ><div>other content...</div></ng-template>
12
Jaroslaw K.

NgIf est une directive structurelle . Cela signifie que votre composant serait détruit lorsque l'expression devient fausse.

Donc, si votre composant est souvent détruit et créé à nouveau, cela peut poser problème. Dans ce cas, la directive [hidden] doit être considérée. Il ne définit que display:none. Dans ce cas, votre composant ne serait pas détruit.

<div [hidden]="expression">{{val}}</div>
2
zgue

utiliser NgIf avec une autre condition 

<div *ngIf="isUser;else Other">
    some Content  here......
</div>

<ng-template #Other> some Content here .....</ng-template>
1
Sachila Ranawaka