angular2路由器导航无法正确加载组件 [英] angular2 router navigation does not load component properly
问题描述
我的代码如下所示:
googleClick(): void {
this._auth.login('google').subscribe(
(data: any) => {
console.log('google server data ' + JSON.stringify(data));
this.loginService.registerUser(data.email, data.name, '0').subscribe(res => {
if (res.status === '200') {
this.storage.store('user_token', res.data.user_token);
this.storage.store('user_email', data.email);
this.storage.store('user_img', data.image);
this.storage.store('user_first_name', res.data.user_name);
this.storage.store('user_id', res.data._id);
this.storage.store('user_paltform_login', 0);
this.router.navigate(['/home']);
}
});
});
}
执行此代码后,它会同时加载本地(当前)路由和后台登录(过去)路由.看起来很奇怪,如下所示:
As soon as I execute this code, it loads home (current) route and in the background login(past) route both. It looks weird as shown below:
app-routing.module.ts
app-routing.module.ts
const routes: Routes = [
{path: '', redirectTo: '/login', pathMatch: 'full' },
{path : 'home', component : HomeComponent },
{path : 'login', component : LoginComponent},
{path : 'foodtrucks', component : FoodComponent},
{path : ':user_name/order-history', component : OrderHistoryComponent},
{path : 'cart' , component : CartComponent},
{path : 'payment', component : PaymentComponent},
{path : ':order_id/order-details', component : OrderDetailsComponent},
{path : 'food-info', component : FoodInfoComponent},
{path : 'thank-you', component : ThankYouComponent}
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]
})
export class AppRoutingModule {}
app.component.ts
app.component.ts
@Component({
selector: 'my-app',
template: '<router-outlet></router-outlet>',
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
home.component.ts
home.component.ts
@Component({
selector: 'my-home',
templateUrl : '../../template/home.html',
styleUrls : ['../../css/home.css']
})
export class HomeComponent implements OnInit {
food: any= [];
itemList: any = [];
user_name: any;
user_email: any;
user_image: any;
myStyle: any = {
width: '0px'
};
constructor(private router: Router, private _homeService: HomeService,
private _storage: LocalStorageService, private winRef: WindowRef) {
console.log('Window object', winRef.nativeWindow);
// winRef.nativeWindow.alert('it is loaded');
}
ngOnInit(): void {
this.user_name = this._storage.retrieve('user_first_name');
this.user_email = this._storage.retrieve('user_email');
this.user_image = this._storage.retrieve('user_img');
this._homeService.getPopularItmes().subscribe(res => {
if (res.status === '200') {
let food = res.data;
for (let value of food) {
for (let item of value.item_list){
this.itemList.push(item);
}
}
}
});
}
openNav(): void {
console.log('open nav clicked');
this.myStyle.width = '230px';
};
closeNav(): void {
this.myStyle.width = '0px';
};
tabClicked(): void {
this.router.navigate(['/foodtrucks']);
};
loadCart(): void {
this.router.navigate(['/cart']);
};
}
login.component.ts
login.component.ts
@Component({
selector : 'my-login',
templateUrl : '../../template/login.html',
styleUrls : ['../../css/login.css']
})
export class LoginComponent {
constructor(private router: Router, public _auth: AuthService,
private storage: LocalStorageService, private loginService: LoginService) {
}
FBLogin(): void {
this._auth.login('facebook').subscribe(
(data: any) => {
console.log(data);
}
);
// this.router.navigate(['/home']);
}
googleClick(): void {
this._auth.login('google').subscribe(
(data: any) => {
console.log('google server data ' + JSON.stringify(data));
this.loginService.registerUser(data.email, data.name, '0').subscribe(res => {
if (res.status === '200') {
this.storage.store('user_token', res.data.user_token);
this.storage.store('user_email', data.email);
this.storage.store('user_img', data.image);
this.storage.store('user_first_name', res.data.user_name);
this.storage.store('user_id', res.data._id);
this.storage.store('user_paltform_login', 0);
this.router.navigate(['/home']);
}
});
});
}
}
我注意到的一件事是,如果我删除了googleClick()
内的所有内容并仅保留this.router.navigate(['/home']);
,那么这很好.
One thing I have noticed is if I remove everything inside googleClick()
and keep only this.router.navigate(['/home']);
then this works fine.
推荐答案
在您的googleClick()
方法上执行以下操作:
On your googleClick()
method do the following:
- 将
NgZone
注入您的组件 - 将行
this.router.navigate(['/home']);
换成NgZonerun
方法
- Inject
NgZone
into your component - Wrap the line
this.router.navigate(['/home']);
into NgZonerun
method
它将是:
this.ngZone.run(() => this.router.navigate(['/home']))
这是一个基于github上的 issue 的工作.
It's a workaroung based on this issue on github.
这篇关于angular2路由器导航无法正确加载组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!