从另一个组件访问变量（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中的功能），用户将不再为空[禁用] =！用户将不再为真，并且第一年字段将被激活。

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，无法从另一个组件访问一个组件中的变量

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传递到about page，它将显示在About页面中。您还可以找到工作版本此处

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] ] [2]接收您从注册页面发送的值。

In Home page, use [navParams][2] 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屋！