如何執行註銷觸發器並做ngIf認證檢查 - 角4和離子3

Question

我有2個問題在這裏：

我不知道如何下面註銷功能附加到退出按鈕，你可以看到我我使用* ngFor指令填充頁面。

我有（點擊）= openPage（p）但是對於註銷頁面，它應該執行註銷功能而不是打開頁面。同一元素上讓我怎麼支票isAuthenticated隱藏或者顯示菜單按鈕：

此外，角不允許多個*指令（* ngIf和* ngFor爲例）。棘手的是，如果用戶沒有通過身份驗證，那麼我想顯示3頁：登錄，註冊，聯繫，如果驗證顯示所有其他。

app.component.ts

this.pages = [ 
    { title: 'Dashboard', component: DashboardPage, icon: 'stats' }, 
    { title: 'Analytics', component: TabsPage, icon: 'analytics' }, 
    { title: 'Portfolio', component: ProtabsPage, icon: 'images' }, 
    { title: 'Profile', component: PtabsPage, icon: 'person' }, 
    { title: 'Customize', component: SettingsPage, icon: 'options' }, 
    { title: 'Contact', component: ContactPage, icon: 'call' }, 
    { title: 'Logout', component: DashboardPage, icon: 'log-out' }, 
    { title: 'Register', component: RegisterPage, icon: 'person-add' }, 
    { title: 'Login', component: LoginPage, icon: 'log-in' } 
    ]; 
this.activePage = this.pages[1]; 

Logout() { 
    this.authService.logout(); 
} 

authService.ts

logout(): void 
{ 
    localStorage.removeItem('currentUser'); 
    this.isLoggedin = false; 
    //Redirect to Login Page 
} 

app.html

<button padding ion-item class="menu-btn" text-center *ngFor="let p of pages" [class.activeHighlight]="checkActive(p)" (click)="openPage(p)"> 
    <ion-icon name="{{p.icon}}" ></ion-icon> 
    <h4>{{p.title}}</h4> 
    </button> 

Answer 1

您可以使用ng-container與*ngIF

<ng-container *ngFor="let p of pages"> 
<button *ngIf="isLoggedin && p.title ==='Logout'" padding ion-item class="menu-btn" text-center [class.activeHighlight]="checkActive(p)" (click)="Logout (p)"> 
    <ion-icon name="{{p.icon}}" ></ion-icon> 
    <h4>{{p.title}}</h4> 
    </button> 
<button *ngIf="!isLoggedin" padding ion-item class="menu-btn" text-center [class.activeHighlight]="checkActive(p)" (click)="openPage(p)"> 
    <ion-icon name="{{p.icon}}" ></ion-icon> 
    <h4>{{p.title}}</h4> 
</button> 
</ng-container> 

Answer 2

您可以選擇在班級內進行邏輯管理。取決於使用它的組件，而不是固定的open（）方法，將一個方法調用相應的方法（打開/註銷等）。你甚至可以在這裏添加更多的支票，就像它是否被記錄一樣。