Question

我有一个应用程序，需要在URL字符串中保持过滤器表单的状态。

您可以看到实现here

在更改表单值时，我想将其设置为URL状态，但是this.router.navigation([], { queryParams })会发出一个在那里不需要的事件。

   data$ = merge(
    this.router.events.pipe(
      filter((e: NavigationEnd) => e instanceof NavigationEnd),
      map(({ url }: NavigationEnd) => {
        const { queryParams } = this.router.parseUrl(url);
        if (queryParams['completed']) {
          queryParams['completed'] = queryParams['completed'] === 'true';
        }
        this.form.patchValue(queryParams, { emitEvent: false });
        return queryParams;
      }),
    ),
    this.form.valueChanges.pipe(
      debounceTime(200),
      tap((queryParams: Task) => {
        this.router.navigate([], { queryParams })
      })
    )
  ).pipe(
    switchMap((query?: Task) => this.getData(query))
  );

是否有可能以某种方式阻止导航事件的发出？

需要与this.form.patchValue(queryParams, { emitEvent: false });

类似的东西

Answer 1

location.go(url)是您所需要的。
您随时可以在router.createUrlTree()方法中生成适当的网址

const url = this.router
        .createUrlTree(
          [{foo: 'bar'}],
          {relativeTo: this.activatedRoute}
        )
        .toString();
this.location.go(url);

有什么办法可以防止RouterEvent触发？

1 个答案: