Question

我正在尝试编写一个将过滤器应用于数据列表的应用。我将过滤器存储在url中以启用深度链接到预先指定的值。下面的代码 - 来自filters.component.ts - 在加载时读取并处理网址，并更新过滤器更改的网址（通过表单元素）。

我的问题是，当应用加载时，使用ngrx状态的引导值调用ngOnChanges。这对应于＆＃34; /＆＃34;的网址。并且我的代码会导致进行导航，覆盖网址中可能包含的内容。

我已经用下面的if语句解决了这个问题，但是因为这是一个hacky，我担心我已经做出了一个更基本的设计选择，并欢迎更具惯用性的建议 - 我认为这意味着如何使用路由器中的数据为我的应用程序保湿？。

  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

在ngOnInit之前和每次更改输入属性时都会调用ngOnChanges一次。虽然这个解决方案并没有摆脱你的if语句，但它确实使它更具可读性。

＆＃13;

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);
  }
}

＆＃13;

从URL params保湿ngrx应用程序

1 个答案: