第一次加载时未从 url 查询参数初始化 Angular 7 变量

Question

我是 Angular 的新手，在首次加载时将参数从 url 传递到查看时遇到问题。

在我的网址中，我有参数页面：

.../catalog?page=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-pagination:

<ngb-pagination class="pagination"
                              [collectionSize]="items.total"
                              [rotate]="true"
                              [(page)]="page"
                              [maxSize]="5"
                              [pageSize]="20"
                              (pageChange)="setPage(page)"
              >
</ngb-pagination>

当我在浏览器中打开/刷新链接时 .../catalog?page=3 ngb-pagination 总是显示页面 1 而不是 3，但接下来导航工作正常（[url中的页面编号和分页相同）。

我做错了什么？

Answer 1

如前所述，您应该使用以下代码重构您的方法：

 ngOnInit(){
       this.route.queryParams.subscribe(params => {
          this.page = params['page'];
        });
     }

还有一个小技巧可以在控制台中打印你想要的内容：

console.log('my value is: ', example);

Answer 2

<ngb-pagination [collectionSize]="total | async" 
(pageChange)="pageChanged($event)"  
[(page)]="page" aria-label="Pagination"></ngb-pagination>

你应该使用/传递 $event 作为参数而不是页面

参考：http://plnkr.co/edit/TDm5rv4RmxIKoWYWp8Qa?p=preview

Answer 3

您应该将*ngIf 指令作为属性添加到ngb-pagination。代码应该是这样的

<ngb-pagination *ngIf="total" [collectionSize]="total"...></ngb-pagination>

它在我的情况下有效。