![](/img/trans.png)
[英]Angular 8 Routing: Changing URL doesn't navigate to expected page
[英]Angular 5 - Routing changes url but doesn't navigate
目前我有三个不同的模块:
现在在这个玩家搜索模块中,我有一个带有子组件的玩家搜索结果组件。 其中一个子组件是一个带有列表的模式。 如果我单击此列表项(播放器),它应该“导航”到父组件并更新其视图。 但唯一更新的是 url。
window.location.href(url)
有一个解决方法,可以在导航方法更新 url 后重新加载页面。 但我不喜欢变通办法。
父组件几乎看起来像:
export class PlayerSearchResultComponent implements OnInit, AfterViewInit {
public isLoading = true;
public searchValue: string;
public playerResult: PlayerByPlayerTagType;
public hasNoResultFound = false;
public clanInfo: ClansByClantagType;
constructor(private playerSearchService: PlayerSearchService,
private activatedRoute: ActivatedRoute,
private clanSearchService: ClanSearchService) {
}
ngOnInit(): void {
this.activatedRoute.params.subscribe((params: Params) => {
this.searchValue = params['playerId'];
});
}
ngAfterViewInit() {
this.playerSearchService.getPlayerByPlayerTag(this.searchValue).subscribe(player => {
this.playerResult = player;
if (!isUndefined(this.playerResult.clan)) {
this.clanSearchService.getClanByClanTag(this.playerResult.clan.tag).subscribe((data: ClansByClantagType) => {
this.clanInfo = data;
});
}
}, () => {
this.hasNoResultFound = true;
this.isLoading = false;
},
() => this.isLoading = false);
}
}
和子组件:
export class ClanModalComponent {
@ViewChild('childModal') childModal: ModalDirective;
@Input() playerResult: PlayerByPlayerTagType;
@Input() clanInfo: ClansByClantagType;
constructor(private router: Router) {
}
open() {
this.childModal.show();
}
memberSearch(member) {
this.childModal.hide();
this.router.navigate(['search/' + member.tag]);
}
}
播放器结果模块如下所示:
const appRoutes: Routes = [
{path: 'search/:playerId', component: PlayerSearchResultComponent}
];
@NgModule({
declarations: [
...
],
imports: [
...
RouterModule.forChild(
appRoutes
)],
providers: [
...
],
exports: []
})
export class PlayerResultModule {
}
因此,要根据路由参数加载,您必须订阅路由参数并加载数据。 ngAfterViewInit 将不再被处理。 因为组件在路由更改后不会再次加载!
ngOnInit(): void {
this.activatedRoute.params.subscribe((params: Params) => {
this.searchValue = params['playerId'];
this.playerSearchService
.getPlayerByPlayerTag(this.searchValue)
.subscribe(player => {
this.playerResult = player;
...
...
});
}
}
//browser is already on /pathName/oldID,
//this means our Routes are correct
let newLocation = `/pathName/${newID}`;
// override default re-use strategy
this.router
.routeReuseStrategy
.shouldReuseRoute = function () {
return false;
};
this.router
.navigateByUrl(newLocation)
.then(
(worked) => {
//works only because we hooked
//the routeReuseStrategy.shouldReuseRoute above
},
(error) => {
debugger;
}
);
我已经看到这个问题的次数比我愿意承认的要多,当我有一个父容器重用子组件时,通常会看到它。
这是因为 Angular 的默认路由重用策略不会重新加载页面!
上面的代码修复了这个默认行为,但必须放入适当的组件中才能从头开始重新加载行为。
请注意,还有其他选择... 假设您希望保持组件重用的速度。 在这种情况下,只需提供一个进入已加载组件的入口点即可重置数据,让组件通过 changeDetectorRef.DetectChanges() 进行更改。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.