Question

我有一个ionic2应用程序。用户可以登录以查看安全数据。用户还可以在不需要登录的情况下查看通用视图。我将安全和非安全数据分成不同的标签。

用户可以从我的关于页面（视图）登录。我的问题是：如何在用户登录后显示安全标签？

这是我做的：我在我的service.ts中创建了一个属性：loggedIn，由整个应用程序共享。

在我的about页面中，我在用户登录后将loggedIn属性更改为true。在我的tab.html中，我有<ion-tab *ngIf="loggedIn==true"。

但是如何通知我的标签组件/标签视图登录过程中已更改loggedIn属性？

Answer 1

在您的登录服务提供商/组件中：

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

    // first page (publish an event when a user has logged in)
    function login() {
    //...login code
      console.log('User logged in!')
      events.publish('user:login', user);
    }

在包含标签的页面中

constructor(public events: Events) {}
ngOnInit(){
events.subscribe('user:login', (user) => {
  // user and time are the same arguments passed in `events.publish(user, time)`
this.isLoggedin=true;
});

Answer 2

about组件中的代码（登录/注销页面）：

    public login(){

        //this.appService.loggedIn = true;
        this.loggedIn = true;
        this.events.publish('user:login', true);
        //console.log(this.appService.loggedIn);
    }
    public logout(){

        //this.appService.loggedIn = false;
        this.loggedIn = false;
        this.events.publish('user:login', false);
        //console.log(this.appService.loggedIn);
    }

标签组件中的代码：

ngOnInit(){
    this.events.subscribe('user:login', (user) => {
      // user here is actually indicating the true/false of logged-in status
      console.log('logged in as:', user[0]);

        this.loggedIn = user[0];
        console.log(this.loggedIn);

    });
  }

ionic2：用户登录后在运行时显示安全选项卡

2 个答案: