问题描述: 在Angular应用中,当导航到不同页面并重置查询后,getList()函数被调用两次。
解决方法:
{ path: 'list/:query', component: ListComponent }
然后在组件中获取参数,并在ngOnInit()方法中调用getList()函数:
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.params.subscribe(params => {
const query = params['query'];
this.getList(query);
});
}
getList(query: string) {
// 调用获取列表数据的函数
}
import { Router } from '@angular/router';
constructor(private router: Router) { }
resetQuery() {
const queryParams = { query: '' };
this.router.navigate(['/list'], { queryParams });
}
然后在组件中获取查询参数,并在ngOnInit()方法中调用getList()函数:
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) { }
ngOnInit() {
this.route.queryParams.subscribe(params => {
const query = params['query'];
this.getList(query);
});
}
getList(query: string) {
// 调用获取列表数据的函数
}
通过以上两种方法,可以避免在导航到不同页面并重置查询后getList()函数被多次调用的问题。