问题描述: 在Angular 4中,登录后导航栏不更新,出现在Redux中卡住。
解决方法:
// user.actions.ts
export const updateUser = (user: User) => {
return {
type: 'UPDATE_USER',
payload: user
};
};
在登录组件中,调用updateUser Action来更新用户状态:
// login.component.ts
import { updateUser } from './user.actions';
// ...
login() {
// perform login logic
// after successful login, update user information in Redux
this.store.dispatch(updateUser(user));
}
ngOnInit生命周期钩子来订阅Redux中的用户状态,并根据用户状态更新导航栏。例如:// navbar.component.ts
import { select } from '@ngrx/store';
import { User } from './user.model';
@Component({
// ...
})
export class NavbarComponent implements OnInit {
user: User;
constructor(private store: Store<{ user: User }>) {}
ngOnInit() {
this.store.pipe(select('user')).subscribe((user: User) => {
this.user = user;
});
}
}
在导航栏的HTML模板中,使用user属性来显示用户信息:
Welcome, {{ user.name }}!
这样,在用户登录成功后,导航栏组件将会订阅Redux中的用户状态,并根据用户状态更新导航栏显示的用户信息。