如何执行注销触发器并做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（）方法，将一个方法调用相应的方法（打开/注销等）。你甚至可以在这里添加更多的支票，就像它是否被记录一样。