从另一个组件(Ionic/Cordova/Angular)访问变量 [英] Access a variable from another Component (Ionic/Cordova/Angular)

问题描述

我正在尝试从另一个组件访问变量以检查用户是否已登录.

I'm trying to access a variable from another component in order to check if the user is logged in or not.

应用程序执行以下操作:

The application does the follow:

如果用户已登录(login.ts 中的函数)用户将不再为空，因此 [disabled]=!user 将不再为真，并且第一年字段将被激活.

If user is loggedin (function in login.ts) user will not be null anymore therefor [disabled]=!user wont be true anymore and the first year field will be activated.

我实现了以下 stackoverflow 解决方案，但没有奏效:Angular 2，Cant能够从另一个组件访问一个组件中的变量

I Implemented the following stackoverflow solution but that did not work: Angular 2, Cant able to access a variable in one Component from another Component

这是我与此问题相关的代码:

Here is my code that is related to this problem:

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

谢谢！

推荐答案

下面是示例代码，我们将在其中将数据从主页传递到导航页面.主页会有一个按钮转到关于页面，点击该按钮后，您的姓名将通过 navParams 传递到关于页面，并显示在关于页面中.您还可以在这里

Below is the sample code where we will pass data from home page to about page on navigation. Home page will have a button Go to about page, on clicking that button, your name will be passed to about page through navParams and it will be displayed in About page. You can also find the working version 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 接收您从 sign 发送的值上一页.

In Home page, use navParams to receive the values you sent from sign up page.

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)访问变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！