在 ionic 3 中刷新 app.components答案

【问题标题】：refresh app.components in ionic 3在 ionic 3 中刷新 app.components
【发布时间】：2018-11-21 22:18:57
【问题描述】：

我想刷新 app.component，因为在我的侧边菜单中有图像和名称，所以我将名称和图像存储在本地存储中，但是当我登录并转到仪表板时，我的 app.component 不刷新，所以需要刷新 app.components

我的菜单文件

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>


        <div class="profile">
            <img class="profile-picture" src="assets/imgs/user_profile.png" />
            <h3 class="name">{{name}}</h3>
        </div>


    <ion-list class="bg-color-menu" no-lines>
      <ion-item menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
        <ion-item>
            <ion-avatar item-start>
                <img [src]="p.icon" />
              </ion-avatar>
              {{p.title}}
        </ion-item>

      </ion-item>
    </ion-list>
  </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.components

name:any;

  this.name = localStorage.getItem("name");

【问题讨论】：

标签： ionic-framework ionic2 ionic3 local-storage

【解决方案1】：

将您的用户数据设为BehaviorSubject。

添加服务 - user.service.ts

export class UserService {
  private currentUserSub = new BehaviorSubject<User>(null);

  constructor(
    private http: HttpClient
  ) {
    const user = JSON.parse(localStorage.getItem('user'));
    this.currentUserSub.next(user);
  }

  login(loginData): Observable<User> {
    return this.http.post('login', loginData)
      .map((res: any) => res.data)
      .do((user: User) => {
        localStorage.setItem('user', JSON.stringify(user));
        this.currentUserSub.next(user);
      });
  }
  getCurrentUserDetails(): Observable<User> {
    const user = JSON.parse(localStorage.getItem('user'));
    this.currentUserSub.next(user);
    return this.currentUserSub;
  }
}

在app.component.ts中调用getCurrentUserDetails获取当前用户数据

getUserDetails() {
    this.userService.getCurrentUserDetails().subscribe(res => {
      this.userProfile = res;
    });
}

在 app.html 中

<div class="profile">
        <img class="profile-picture" src="userProfile.imgUrl" />
        <h3 class="name">{{userProfile.name}}</h3>
    </div>

这是一个例子。按照你的要求去做。

【讨论】：