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

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

0 голосов
/ 28 ноября 2018

Я новичок в 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 одинаково).

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

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018 
<ngb-pagination [collectionSize]="total | async" 
(pageChange)="pageChanged($event)"  
[(page)]="page" aria-label="Pagination"></ngb-pagination>

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

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

0 голосов
/ 28 ноября 2018

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

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

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

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