大佬教程收集整理的这篇文章主要介绍了angular – 如何刷新组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
问题是,例如,当用户单击注销时,导航栏会更改,但在刷新页面之前,其他组件不会消失.按下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) {} }
如何触发组件重置？
这是必要的(我认为),因为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.
以上是大佬教程为你收集整理的angular – 如何刷新组件全部内容，希望文章能够帮你解决angular – 如何刷新组件所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。