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

Posted 2023-02-22

【中文标题】第一次加载时未从 url 查询参数初始化 Angular 7 变量

【英文标题】：Angular 7 variable in view not initialized from url query params on first load

【发布时间】：2019-04-30 10:44:09

【问题描述】：

我是 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中的页面编号和分页相同）。

我做错了什么？

【问题讨论】：

尝试this.page = +params['page']将“3”作为字符串转换为数字。

试着把它放在构造函数中。

嗨，亚历克斯 K！ onInit() 应该是 ngOnInit()

感谢解答，还是不行，我更新了代码示例。

你能记录page和items的值吗？

【参考方案1】：

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

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

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

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

【参考方案2】：

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

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

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

【讨论】：

似乎是重复的。再到这里***.com/questions/41223400/…

【参考方案3】：

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

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

它在我的情况下有效。