Angular 如何从另一个ts文件更新vaiable in component.ts文件

最初我的app.component.ts文件被加载，然后我有两个变量

name

和

email

，它们是从API get调用更新的，为了进行此API调用，我需要用户名如果我没有用户名，我将无法更新此名称和电子邮件

我将能够在获得用户名后进行api调用，但只有在登录成功后，我的用户名才可用

my app.html有此功能，下面的代码是我的侧菜单的一部分

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

问题

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

如何从其他页面（如home.ts或login.ts）更新我的app.component.ts文件

更新：

我的完整app.html页面

<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>

保护我
{{name}}
{{email}
{{p.title}}

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

如果我想在此处更新我的姓名和电子邮件，我必须转到我的app.component.ts文件，如

this.name=“username”和
this.email=”email@gmail.com“`工作正常吗

同样，如果我在my home.ts文件中给出姓名和电子邮件，我将看不到任何内容，在这种情况下，您必须使用服务并在该服务中定义该变量，整个应用程序都可以访问该服务

请查看此参考，它可能会帮助您：
在这种情况下，您必须使用服务并在该服务中定义该变量，并且整个应用程序都可以访问此服务

请查看此参考资料，它可能会帮助您：
您必须借助事件发射器

查看此链接


还有这个


您还可以使用相同的服务，即在用户登录和应用程序组件加载时在服务中保存信息，从服务中获取值以显示相同的信息。
您必须借助事件发射器

查看此链接


还有这个


您还可以使用相同的服务，即在用户登录和应用程序组件加载时在服务中保存信息，从服务中获取值以显示相同的信息。
我的建议是创建一个用户数据提供者，该提供者是所有用户属性的单一来源，通过将其注入其他组件，可以在整个应用程序中访问

首先通过Ionic CLI生成提供程序：

ionic generate provider user-data

这将为您创建一个模板提供程序，然后您可以使用自己的方法填充它，例如名称和电子邮件的getter和setter，下面是我在其他项目上的做法：

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class UserData {

  private name: string;
  private email: string;
  constructor(private storage: Storage) {
    this.getName().then((name) => {
      this.name = name;
    });
    this.getEmail().then((email) => {
      this.email = email;
    });
  }
  // Gets name from provider instance variable or storage if undefined.
  public getName(): Promise<string> {
    if (this.name) {
      return Promise.resolve(this.name);
    }
    else {
      return this.storage.get('name').then((name) => {
        this.name = name;
        return name;
      });
    }
  }
  // Gets email from provider instance variable or storage if undefined.
  public getEmail(): Promise<string> {
    if (this.email) {
      return Promise.resolve(this.email);
    }
    else {
      return this.storage.get('email').then((email) => {
        this.email = email;
        return email;
      });
    }
  }

  public setName(name: string): void {
    this.name = name;
    this.storage.set("name", name);
  }

  public setEmail(email: string): void {
    this.email = email;
    this.storage.set("email", email);
  }
}

此模式类似于官方的Ionic示例应用程序所使用的模式，或者是一个很好的参考点。
我的建议是创建一个用户数据提供者，该提供者是所有用户属性的单一来源，通过将其注入到其他组件中，可以在整个应用程序中访问

首先通过Ionic CLI生成提供程序：

ionic generate provider user-data

这将为您创建一个模板提供程序，然后您可以使用自己的方法填充它，例如名称和电子邮件的getter和setter，下面是我在其他项目上的做法：

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class UserData {

  private name: string;
  private email: string;
  constructor(private storage: Storage) {
    this.getName().then((name) => {
      this.name = name;
    });
    this.getEmail().then((email) => {
      this.email = email;
    });
  }
  // Gets name from provider instance variable or storage if undefined.
  public getName(): Promise<string> {
    if (this.name) {
      return Promise.resolve(this.name);
    }
    else {
      return this.storage.get('name').then((name) => {
        this.name = name;
        return name;
      });
    }
  }
  // Gets email from provider instance variable or storage if undefined.
  public getEmail(): Promise<string> {
    if (this.email) {
      return Promise.resolve(this.email);
    }
    else {
      return this.storage.get('email').then((email) => {
        this.email = email;
        return email;
      });
    }
  }

  public setName(name: string): void {
    this.name = name;
    this.storage.set("name", name);
  }

  public setEmail(email: string): void {
    this.email = email;
    this.storage.set("email", email);
  }
}

此模式与官方Ionic示例应用程序使用的模式类似，或者是一个很好的参考点。
我检查了您的更新问题，下面是我的答案：

-首先，在
AppComponent
：

update(){
   this.name =this.service.getUserName();
   this.email = this.service.getUserEmail();
}

-更新用户时，在
主页
（或您想要的页面）中调用此功能
要做到这一点，您需要完成以下步骤：

步骤1：在
主页
中插入您的
应用组件
：

import { Component,Inject,forwardRef } from '@angular/core';
import {AppComponent} from '../app/app.component'
@Component({
   selector: 'page-home',
   templateUrl: 'page-home.html',
   providers:[AppComponent]
})
constructor(@Inject(forwardRef(() => AppComponent)) appComponent: AppComponent){
}
login(){
   //Do the login
   //When logged in update the varible
   this.appComponent.update();
}

请参阅
中的详细信息。我检查了您的更新问题，以下是我的答案：

-首先，在
AppComponent
：

update(){
   this.name =this.service.getUserName();
   this.email = this.service.getUserEmail();
}

-更新用户时，在
主页
（或您想要的页面）中调用此功能
要做到这一点，您需要完成以下步骤：

步骤1：在
主页
中插入您的
应用组件
：

import { Component,Inject,forwardRef } from '@angular/core';
import {AppComponent} from '../app/app.component'
@Component({
   selector: 'page-home',
   templateUrl: 'page-home.html',
   providers:[AppComponent]
})
constructor(@Inject(forwardRef(() => AppComponent)) appComponent: AppComponent){
}
login(){
   //Do the login
   //When logged in update the varible
   this.appComponent.update();
}

详见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');
}

在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');
}

@MohanGopi您可以在app.component.ts和home.ts中使用UserData提供程序，方法是将其注入到这两个组件中。因此，UserData提供程序将保存“name”和“email”变量，而不是app.component.ts，然后getter和setter可以访问这些变量。@MohanGopi您可以通过将UserData提供程序注入到app.component.ts和home.ts这两个组件中来使用它们。因此，UserData提供程序将保留“name”和“email”变量，而不是app.component.ts，然后可由getter和setter访问。请检查我的答案请检查我的答案我尝试了您的答案检查此
@Inject（forwardRef（（）=>AppComponent）
我遇到错误，实际语法是
@Inject（'MyEngine'））public appComponent:appComponent
不是一个类我不知道什么是我的engineHmm。那么为什么你有这个代码
@Inject（'myengine'）public appComponent:appComponent
。这个代码有什么错误：
@Inject（forwardRef（（）=>appComponent）
？我试过你的答案了检查这个
@Inject>（forwardRef（（）=>AppComponent）
我遇到了错误，实际语法是
@Inject（'MyEngine'）公共AppComponent:AppComponent
MyEngine
不是一个类我不知道什么是我的engineHmm。那么为什么你有这个代码
@Inject（'MyEngine'））公共appComponent:appComponent
。该代码有什么错误：
@Inject（forwardRef）（）=