我是Angular的新手，在第一次加载时将参数从url传递到视图时遇到问题。
在我的URL中，我有一个参数页面：
/目录第3页
在组件中，我有下一个代码：
export class CatalogListComponent implements OnInit {
page;
constructor(private route: ActivatedRoute){
}
ngOnInit(){
this.route.queryParams.subscribe(params => {
this.page = +params['page'] || 1;
});
}
setPage(page: number) {
this.router.navigate(['catalog'], { queryParams: {...this.queryParams, page } });
}
}
在视图中，我使用ngb分页：
<ngb-pagination class="pagination"
[collectionSize]="items.total"
[rotate]="true"
[(page)]="page"
[maxSize]="5"
[pageSize]="20"
(pageChange)="setPage(page)"
>
</ngb-pagination>
当我在浏览器中打开/刷新链接时/目录page=3ngb分页总是显示页面1而不是3，但下一次导航工作正常([url中的页码和分页中的页码相同(。
我做错了什么
如前所述，您应该使用以下代码重构方法：
ngOnInit(){
this.route.queryParams.subscribe(params => {
this.page = params['page'];
});
}
还有一个小技巧可以在控制台中打印您想要的内容：
console.log('my value is: ', example);
<ngb-pagination [collectionSize]="total | async"
(pageChange)="pageChanged($event)"
[(page)]="page" aria-label="Pagination"></ngb-pagination>
您应该使用/传递$event作为参数，而不是页面
参考编号：http://plnkr.co/edit/TDm5rv4RmxIKoWYWp8Qa?p=preview
您应该将*ngIf指令添加为ngb-pagination的属性。代码应该看起来像这个
<ngb-pagination *ngIf="total" [collectionSize]="total"...></ngb-pagination>
这对我来说是有效的。