如何从另一个ts文件更新component.ts文件中的vaiable [英] how to update a vaiable in component.ts file from another ts file

问题描述

最初我的app.component.ts文件被加载然后我有两个变量 name 和 email 更新了从API获取调用，为了进行此api调用我需要用户名，如果我没有用户名，我将无法更新此名称和电子邮件。

initially my app.component.ts file is loaded then I have two variable name and email which is updated from an API get call, in order to make this api call I need username if I dont have the username I will be not able to update this name and email.

I我可以在获得用户名后拨打api电话，但我的用户名只有在登录成功后才可用。

I will be able to make the api call once i got the username but my username will be available after the login success only.

我的app.html有以下代码是我的sidemenu的一部分

my app.html has this and the below code is a part of my sidemenu

<ion-item class="profile-info">
  <ion-icon name="person" item-left></ion-icon>
  <h2>{{name}}</h2>
  <p class="se-email">{{email}}</p>
</ion-item>

我的app.component.ts文件有此

my app.component.ts file has this

name 
 email

 if(localStorage.getItem("username")){
   //here it is invoking 2nd time because i have stored the username after login so no problem
    this.getUserDetails();//this function call the same api 
  }else{
    //at first thime i am not able update the name and email because i dont have username 
    //so i am trying to update the name with set and get method where it will return my data 
    this.name =this.service.getUserName();
    this.email = this.service.getUserEmail();
  }

问题

我无法从主页或登录页面更新名称和电子邮件变量

I am not able to update the name and email variable from the home page or login page

如何更新我的app.component.ts文件来自另一个页面，如home.ts或login.ts

How to update my app.component.ts file from another page like home.ts or login.ts

更新：

我的完整app.html页面

my complete app.html page

<ion-menu [content]="content">
  <ion-header id="slidermenu_header">
    <ion-toolbar>
      <ion-title style="padding: 0 8px 4px;">SEcure Me</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content class="slidermenu_content">
    <ion-list style="margin: -1px 0 24px -5px;">
      <ion-item class="profile-info">
          <ion-icon name="person" item-left></ion-icon>
          <h2 >{{name}}</h2>
          <p class="se-email">{{email}}</p>
      </ion-item>
    </ion-list>
    <div id="slidermenulist">
      <ion-item *ngFor="let p of pages" (click)="openPage(p)" menuClose>
        <ion-icon [name]="p.icon" item-left></ion-icon>
          {{p.title}}
      </ion-item>
    </div>
  </ion-content>
</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

从上面的代码可以看出我在我的应用程序中只使用了一个侧面菜单但是如果我是在许多页面上使用此侧面菜单

from the code above you can see I am using only one side menu in my application but if I am using this side menu on many pages

如果我想更新我的姓名和电子邮件，我必须转到我的app.component.ts文件，如 this.name =username'和 this.email =[e-mail]`工作正常

if I want to update my name and email here I have to go to my app.component.ts file like this.name="username"' andthis.email="[e-mail]"` is working fine

同样如果我在我的home.ts文件中给出姓名和电子邮件，我无法在app.component中看到任何内容

In the same way if i give name and email in my home.ts file i am not able to see anything

推荐答案

。 ts：

import { Events } from 'ionic-angular';
constructor(public events: Events) {
   events.subscribe('user:login', () => {
     this.loggedIn();
   });
}

loggedIn() {
  console.log("logged in");
}

在主叫页面中：

import { Events } from 'ionic-angular';
constructor(public events: Events) {
  this.logIn();
}

logIn() {
  events.publish('user:login');
}

这篇关于如何从另一个ts文件更新component.ts文件中的vaiable的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！