如何执行注销触发器并执行 ngIf 身份验证检查 - Angular 4 和 Ionic 3

Question

我这里有两个问题：

我不确定如何将下面的注销功能附加到注销按钮，如您所见，我正在使用 *ngFor 指令填充页面。

我有 (click)=openPage(p) 但对于注销页面，它应该执行注销功能而不是打开页面。

此外，Angular 不允许在同一元素上使用多个 * 指令（例如：*ngIf 和 *ngFor） 那么我该如何 检查 isAuthenticated 以隐藏或显示菜单按钮。 棘手的一点是，如果用户未通过身份验证，那么我想显示 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

你可以在里面选择逻辑管理class。代替固定的 open() 方法，放置一个方法，该方法将根据使用它的组件调用相应的方法（open/logout，等等）。您甚至可以在此处添加更多检查，例如是否已记录。

如何执行注销触发器并执行 ngIf 身份验证检查 - Angular 4 和 Ionic 3

how to execute logout trigger and do ngIf authentication check - Angular 4 and Ionic 3

javascript

angularjs-directive

ionic3

angular

app.component.ts

authService.ts

app.html