Угловая переменная 7 в представлении не инициализируется из параметров запроса URL при первой загрузке

Question

Я новичок в Angular, и у меня проблема с парольными параметрами из URL для просмотра при первой загрузке.

В моем 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 , но при следующей навигацииработает нормально ([page num в url и pagination одинаково).

Что я делаю не так?

Answer 1

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

вы должны использовать / передавать событие $ в качестве аргумента вместо страницы

Ref: http://plnkr.co/edit/TDm5rv4RmxIKoWYWp8Qa?p=preview

Answer 2

Как уже было сказано ранее, вы должны рефакторинг вашего метода с помощью следующего кода:

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

И есть небольшая хитрость, чтобы напечатать то, что вы хотите в консоли:

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