web-dev-qa-db-ja.com

最適な条件付きテンプレートを表示する方法angular 4

現在、私は練習していますangular 4.通常のユーザーがこれを表示し、公開コンテンツを表示する場合登録ユーザーがWebページに入ると、編集またはコンテンツを表示します。ベストプラクティスが条件付きテンプレートまたはいくつかのHTMLコンテンツの例を示す方法：

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

実際、最高の方法を知りたいです。

angularangular-template
9
Md. Abu Sayed

angular 4では、if .. else .. htmlテンプレートの構造を使用できます

この方法で使用できます：

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

しかし、あなたの場合、最も美しい解決策はif ... then ... else ...条件付きです

<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>
21
Jaroslaw K.

NgIfは 構造ディレクティブ です。つまり、式が偽になるとコンポーネントが破棄されます。

そのため、コンポーネントが頻繁に破壊されて再作成される場合、これが問題になる可能性があります。この場合、[hidden]ディレクティブを考慮する必要があります。 display:noneのみを設定します。この場合、コンポーネントは破棄されません。

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

else条件でNgIfを使用します

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

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