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

问题描述

最初我的 app.component.ts 文件被加载，然后我有两个变量 name 和 email 从 API get 调用更新，以制作这个 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.

一旦我得到用户名，我将能够进行 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 有这个，下面的代码是我的侧边菜单的一部分

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

如何从另一个页面(如 home.ts 或 login.ts)更新我的 app.component.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"' and this.email="[e-mail]"` is working fine

同样，如果我在 home.ts 文件中提供姓名和电子邮件，我将看不到任何内容

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

推荐答案

在 app.component.ts 中:

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