Question

我试图从另一个组件访问变量，以检查用户是否已登录。

该应用程序执行以下操作：

如果用户登录（login.ts中的功能），用户将不再为空[禁用] =！用户将不再为真，并且第一年字段将被激活。

我实现了以下stackoverflow解决方案但是没有用： Angular 2, Cant able to access a variable in one Component from another Component

以下是与此问题相关的代码：

          ` https://plnkr.co/edit/xzHazahrSHErJa9K0ceb?p=preview `

谢谢！

Answer 1

以下是我们将数据从主页传递到导航页面的示例代码。主页将有一个按钮转到关于页面，点击该按钮，您的名称将通过navParams传递到about page，它将显示在About页面中。您还可以找到工作版here

<强> home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {appService} from '../../providers/app.service';
import {AboutPage} from '../../pages/about/about';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  aboutPage : any;

  constructor(public navCtrl: NavController, public appService : appService) {
    this.aboutPage=AboutPage;
  }

  goToAbout(){
    this.navCtrl.push(this.aboutPage, {
            userData: "Ajay kumar singh"
        });
  }

}

在主页中，使用navParams接收您从注册页面发送的值。

userData : any;
constructor(public navParams: NavParams){
   this.userData= navParams.data.userData;
}

<强> home.html的

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages. {{appService.service}}
  </p>

  <button ion-button (click)="goToAbout()">Go to About Page</button>
</ion-content>

<强> about.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  userData : any;
  constructor(public navCtrl: NavController, navParams : NavParams) {
    this.userData= navParams.data.userData;
  }

}

<强> about.html

<ion-header>
  <ion-navbar>
    <ion-title>
      About
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  {{userData}}
</ion-content>

从另一个组件访问变量（Ionic / Cordova / Angular）

1 个答案: