Ionic 3 中的注销功能答案

【问题标题】：Logout function in Ionic 3Ionic 3 中的注销功能
【发布时间】：2019-05-03 15:29:29
【问题描述】：

我在 ionic 3 的服务中有一些 AuthService，具有注销功能

auth.service.ts

export class AuthService {) { }  
  logout() {
   Alert('User is logging off..');
  }
}

问题是我必须在我的标题中使用该函数，该函数在每个页面中都重复

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>
      <img class="header-logo pull-left" src="assets/img/logo.jpg" alt="">
      <ion-icon name="log-out" class="pull-right logout-action" (click)="logout()"></ion-icon>
    </ion-title>
  </ion-navbar>
</ion-header>

我需要的是我可以在我的每个页面中使用该功能，而不是在每个页面中导入服务和创建功能

【问题讨论】：

标签： angular ionic-framework ionic3

【解决方案1】：

在页脚添加注销按钮，并将其放入app.html中，如下所示：

<ion-footer>
   <button ion-button round (click)="logout()">LOGOUT</button>
</ion-footer>

另外，在 app.component.ts 文件中添加以下代码：

constructor(){}
logout(){
   alert("This is logout");
}

【讨论】：

【解决方案2】：

在这种情况下，您可以使用与服务和功能紧密耦合的共享组件。

在您的页面中添加组件，以便始终共享。

【讨论】：

你能举个简单的例子吗

【解决方案3】：

有多种方法可以满足您的需求：

创建一个自定义组件（或任何您想要的名称）来封装您的标头（组件的模板将是您提供的代码 sn-p）并实现 logout 功能.在您需要的每一页上使用。同样这样你可以重用一些代码，你的 HTML 会更干净。
服务解决方案（您避免使用）：创建一个服务/提供者来实现您的 logout 方法。在需要的地方注入创建的服务。注意：您应该在构造函数中将注入的服务标记为 public，以便可以从模板访问为 serviceName.logout()。

两种解决方案都应如您所愿，但您可能会考虑将注销按钮移至父组件中或创建侧边菜单或为带有注销、更改密码等的用户配置文件。

【讨论】：