最初我的app.component.ts文件被加载，然后我有两个变量name和email，它是从API get调用更新的，为了进行这个api调用，我需要用户名，如果我没有用户名，我将无法更新这个名称和电子邮件。
获得用户名后，我将能够进行 api 调用，但我的用户名仅在登录成功后可用。
我的应用程序.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>
我的应用程序组件.ts文件有这个
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();
}
问题
我无法从主页或登录页面更新名称和电子邮件变量
如何从另一个页面(如home.ts或login.ts)更新我的app.component.ts文件
更新：
我的完整应用.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>
从上面的代码中，您可以看到我在我的应用程序中只使用了一个侧菜单，但是如果我在许多页面上使用此侧菜单
如果我想在这里更新我的名字和电子邮件，我必须转到我的 app.component.ts 文件，例如this.name="username"' andthis.email="email@gmail.com"' 工作正常
同样，如果我在我的home.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');
}
我的建议是创建一个用户数据提供程序，它是所有用户属性的单一来源，并且可以通过将其注入其他组件来访问整个应用。
首先通过 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);
}
}
在提供程序中定义了所需的所有方法后，接下来需要将其导入app.module.ts文件并将其添加到providers数组中。
然后，您只需将提供程序注入要访问用户数据的组件中：
import { Component } from '@angular/core';
import { UserData } from '../../providers/user-data';
export class SomeComponent {
constructor(private userData: UserData) {
console.log(userData.getName());
console.log(userDate.getEmail());
}
}
这种模式类似于官方Ionic示例应用程序或Ionic Conference应用程序使用的模式，这是一个很好的参考点。
在这种情况下，您必须使用服务并在该服务中定义该变量，并且该服务将在整个应用程序中访问。
请看一下这个参考，它可能会帮助你：https：//stackoverflow.com/a/44453536/6606630
你必须借助事件发射器
查看此链接
https://github.com/rahulrsingh09/AngularConcepts/tree/master/src/app/parentchild
而这个
https://angular.io/api/core/EventEmitter
您还可以将服务用于相同的i：e，当用户登录时，以及当应用程序组件加载从服务中提取值以显示相同的值时，将信息保存在服务中。
我检查了您的更新问题，这是我的答案：
- 首先，创建一个函数来更新您的变量AppComponent：
update(){
this.name =this.service.getUserName();
this.email = this.service.getUserEmail();
}
- 更新用户时，在HomePage(或所需的页面)中调用此函数。
为此，您需要执行一些步骤：
Step1：在HomePage中注入您的AppComponent：
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();
}
查看此答案的详细信息