Question

我在离子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>

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

Answer 1

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

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

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

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

Answer 2

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

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

Answer 3

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

创建一个封装标题的自定义组件（或任何您想要的名称）（组件的模板将是您提供的代码段）并实现注销功能。使用您需要的每个页面。这样你就可以重用一些代码，你的HTML也会更清晰。
服务解决方案（您避免使用）：创建实施注销方法的服务/提供商。在您需要的地方注入所创建的服务。注意：您应该在构造函数中将注入的服务标记为 public ，以便可以从模板中访问 serviceName.logout（）。

两种解决方案都应按预期工作，但您可以考虑将注销按钮移动到父组件或创建侧边菜单或创建专用页面用户配置文件，注销，更改密码等。

Ionic 3中的注销功能

3 个答案: