angular – 如何刷新组件

发布时间：2020-12-17 17:46:01 所属栏目：安全来源：网络整理

导读：我有一个简单的基于Angular2的Web应用程序,带有身份验证.我遇到了一个问题,根据用户是否登录导航栏看起来不同,并且当用户未登录时,某些组件也不会显示. 问题是,例如,当用户单击注销时,导航栏会更改,但在刷新页面之前,其他组件不会消失.按下LogOut按钮时如何

我有一个简单的基于Angular2的Web应用程序,带有身份验证.我遇到了一个问题,根据用户是否登录导航栏看起来不同,并且当用户未登录时,某些组件也不会显示.

问题是,例如,当用户单击注销时,导航栏会更改,但在刷新页面之前,其他组件不会消失.按下LogOut按钮时如何触发组件刷新？

//user.service.ts
  logout() {
    localStorage.removeItem('id_token');
    this.loggedIn = false;
  }

//nav.component.ts
import { Component,Inject } from 'angular2/core';
import { RouteConfig,ROUTER_DIRECTIVES } from 'angular2/router';

import { UserService } from '../user/services/user.service';

@Component({
  selector: 'nav-bar',template: `
  <div class="nav">
    <a [routerLink]="['LoginComponent']" *ngIf="!_userService.isLoggedIn()">Login</a>
    <a [routerLink]="['SignupComponent']" *ngIf="!_userService.isLoggedIn()">Sign Up</a>
    <a [routerLink]="['TodoComponent']" *ngIf="_userService.isLoggedIn()">ToDo</a>
    <button (click)="_userService.logout($event)" *ngIf="_userService.isLoggedIn()">Log Out</button>
  </div>
  `,styleUrls: ['client/dev/todo/styles/todo.css'],directives: [ROUTER_DIRECTIVES],providers: [ UserService ]
})

export class NavComponent {

    constructor(@Inject(UserService) private _userService: UserService) {}

}

nav组件呈现在路由器生成的任何内容之上.

如何触发组件重置？

解决方法

使用事件或可观察对象.

这是必要的(我认为),因为Angular 2不再具有双向绑定.

在我的LoginService中,我使用ReplaySubject(它类似于Observable对象,但是’存储’最后一个值并且在它订阅时’重放’它)来自RxJS,然后我从我想要更新的组件订阅该ReplaySubject.

示例登录服务

import {ReplaySubject,Observable} from 'rxjs/Rx';  
import {Injectable} from 'angular2/core';

@Injectable()
export class LoginService {
  private logged = new ReplaySubject<boolean>(1); // Resend 1 old value to new subscribers

  // isLoggedIn checks with server if user is already logged in.
  // Returns true if logged in,and caches the result and user data.
  isLoggedIn(): ReplaySubject<boolean> {
    return this.logged;
  }

  // logIn attempts to log in a user,returns attempt result.
  // Caches login status.
  logIn(user: string,password: string): Observable<boolean> {
    return Observable.timer(100).map(() => { // emulate a 100ms delay on login
      this.logged.next(true);
      return true;
    })

  }

  logOut() {
    // need api call to logout here
    this.user = null;
    this.logged.next(false);
  }
}

示例组件

import {Component} from 'angular2/core';
import {LoginService} from "../user/login.service";

@Component({
  selector: 'an-menu',templateUrl: 'app/user/menu.html',})
export class MenuComponent {
  loggedIn: boolean;

  constructor(private _loginService: LoginService) {
    this._loginService.isLoggedIn()
      .subscribe(r => {
        this.loggedIn = r;
      });
  }

  onLogout() {
    this._loginService.logOut();
  }
}

这样您就可以在模板中使用loggedIn变量,也可以从不同的组件订阅ReplaySubject.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!