обновить app.components в ионном 3 - PullRequest
Новая
       26

обновить app.components в ионном 3

0 голосов
/ 12 июня 2018

Я хочу обновить 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");

1 Ответ

0 голосов
/ 12 июня 2018

Сделайте ваши данные пользователя как 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;
  }
}

вызовите getCurrentUserDetails в app.component.ts, чтобы получить данные текущего пользователя.

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>

это пример.Сделайте это согласно вашему требованию.

...