Увлажняющее приложение ngrx из URL-параметров

Question

Я пытаюсь написать приложение, которое применяет фильтры к списку данных. Я храню фильтры в URL-адресе, чтобы обеспечить глубокую привязку к предварительно заданным значениям. Код ниже - от filters.component.ts - считывает и обрабатывает URL-адрес при загрузке и обновляет URL-адрес изменений в фильтрах (через элементы формы).

Моя проблема заключается в том, что при загрузке приложения вызывается ngOnChanges со значением начальной загрузки состояния ngrx. Это соответствует URL-адресу «/», и мой код вызывает навигацию, которая перезаписывает все, что могло быть в URL-адресе.

У меня есть это с помощью if-утверждения ниже, но поскольку это хакки, я боюсь, что сделал более фундаментальный выбор дизайна и приветствовал бы рекомендации сделать это более идиоматично - я думаю, это означает, что это означает , как можно Я увлажняю приложение с данными с маршрутизатора?.

ngOnInit() { 
    this.route.params.forEach((params: Params) => { 
     this.action.next({ 
     type: NEW_FILTERS, 
     payload: fromUrl(params['filter']) 
     }) 
    }); 
    } 

    ngOnChanges(changes: SimpleChanges) { 
    if (typeof changes['filters'].previousValue.budget != 'undefined') { 
     this.cmpFilters = Object.assign({}, this.filters); 

     let link = ['/recommendations', toUrl(this.cmpFilters)]; 
     this.router.navigate(link); 
    } 
    } 

Answer 1

ngOnChanges вызывается один раз перед ngOnInit и каждый раз, когда изменяется свойство ввода. Хотя это решение не избавляется от вашего оператора if, оно делает его более читаемым.

ngOnInit() { 
 
    this.initialized = true; 
 
    this.route.params.forEach((params: Params) => { 
 
    this.action.next({ 
 
     type: NEW_FILTERS, 
 
     payload: fromUrl(params['filter']) 
 
    }) 
 
    }); 
 
} 
 

 
ngOnChanges(changes: SimpleChanges) { 
 
    if (this.initialized) { 
 
    this.cmpFilters = Object.assign({}, this.filters); 
 
    let link = ['/recommendations', toUrl(this.cmpFilters)]; 
 
    this.router.navigate(link); 
 
    } 
 
}