angular-route-interface NavigationExtras

Introduction

今天我们来介绍一下Angular中的NavigationExtras接口，我们在使用Router进行导航时，可以通过NavigationExtras接口来传递额外的导航参数。

NavigationExtras接口定义如下：

interface NavigationExtras {
  override relativeTo?: ActivatedRoute;
  override queryParams?: Params;
  override fragment?: string;
  override queryParamsHandling?: QueryParamsHandling;
  override preserveFragment?: boolean;
  override onSameUrlNavigation?: OnSameUrlNavigation;
  override skipLocationChange?: boolean;
  override replaceUrl?: boolean;
  override state?: { [k: string]: any; };
  readonly override info?: unknown;
}

relativeTo

relativeTo属性是一个ActivatedRoute对象，用来指定导航的相对路径。假设有如下路由配置，ParentComponent下有两个子路由ListComponent和ChildComponent.

[{
  path: 'parent',
  component: ParentComponent,
  children: [{
    path: 'list',
    component: ListComponent
  },{
    path: 'child',
    component: ChildComponent
  }]
}]

如果我们当前位于ChildComponent，想要导航到ListComponent，可以使用relativeTo属性来指定相对路径，其中..表示上一级路径，也就是ParentComponent。../list表示导航到parent/list路径，也就是ParentComponent下的ListComponent`。

@Component({...})
 class ChildComponent {
   constructor(private router: Router, private route: ActivatedRoute) {}
   go() {
     router.navigate(['../list'], { relativeTo: this.route });
   }
 }

queryParams

queryParams属性是一个Params对象，用来指定导航时的查询参数。比如我们要导航到/list路径，并且带上查询参数page=1，可以使用queryParams属性。

// Navigate to /results?page=1
router.navigate(['/results'], { queryParams: { page: 1 } });

// Navigate to /results?page=1&sort=desc
router.navigate(['/results'], { queryParams: { page: 1, sort: 'desc' } });

fragment

fragment属性是一个字符串，用来指定导航时的fragment，fragment是以#号开头的标识符。比如我们要导航到/list路径，并且带上片段标识符top，可以使用fragment属性。

1 2	// Navigate to /results#top router.navigate(['/results'], { fragment: 'top' });

queryParamsHandling

queryParamsHandling属性是一个枚举类型，用来指定导航时如何处理查询参数。有以下几种取值：

preserve : Preserve parameters in original url and discard new parameters in target url
merge : Merge target url query params with original url parameters.

在下面的代码中使用了preserve参数，表示保留原始url中的查询参数。而目标url中的查询参数{page: 2}将被忽略。导航结束后，url为/view2?page=1。

1
2
3

// from /view1?page=1 to /view2?page=1
router.navigate(['/view2'], { queryParams: { page: 2 },  queryParamsHandling: "preserve"
});

在下面的代码中使用了merge参数，表示将目标url中的查询参数与原始url中的查询参数合并。导航结束后，url为/view2?page=1&otherKey=2。

1
2
3

// from /view1?page=1 to /view2?page=1&otherKey=2
router.navigate(['/view2'], { queryParams: { otherKey: 2 },  queryParamsHandling: "merge"
});

需要注意，如果源url和目标url中都有相同的查询参数，那么目标url中的查询参数会覆盖源url中的查询参数。下面的例子中，导航后，url为/view2?page=2&id=2。page参数的值被目标url中的值覆盖了。

1 2	// from /view1?page=1 to /view2?page=2&id=2 router.navigate(['/view2'], { queryParams: { page: 2, id: 2 }, queryParamsHandling: "merge"});

preserveFragment

preserveFragment属性是一个布尔值，用来指定导航时是否保留原始url中的fragment标识符。如果设置为true，则保留原始url中的片段标识符，否则忽略。默认值为false。

1 2	// from /view1#top to /view2#top router.navigate(['/view2'], { preserveFragment: true });

// from /view1#top to /view2
router.navigate(['/view2']);
// or
router.navigate(['/view2'], { preserveFragment: false });

onSameUrlNavigation

onSameUrlNavigation属性是一个枚举类型，用来指定当导航到相同url时的行为。有以下几种取值：

reload : Reload the page
ignore : Ignore the navigation

1 2	// from /view1 to /view1 router.navigate(['/view1'], { onSameUrlNavigation: 'reload' });

skipLocationChange

skipLocationChange属性是一个布尔值，用来指定是否在url中添加一个新的历史记录。如果设置为true，则不会添加新的历史记录，导航结束后，浏览器的历史记录不会改变。默认值为false。

假设有如下导航：view1 -> view2 -> view3, 如果在view2 -> view3的导航中设置skipLocationChange为true，则导航结束后，浏览器的历史记录为view1 -> view2，而不是view1 -> view2 -> view3。导航结束后，浏览器的url为/view2，点击浏览器的回退按钮，会回到/view1。

注意以上只是本质行为，还有一个视觉行为，如果设置为true，则导航结束后，浏览器的url不会改变，但是页面内容会改变。这样用户在浏览器的历史记录中看不到导航记录。

以下代码从/view1导航到/view2，导航结束后，浏览器的url不会改变，仍然是/view1,但是页面内容会改变, 显示/view2的内容。

1 2	// from /view1 to /view2 router.navigate(['/view2'], { skipLocationChange: true });

replaceUrl

replaceUrl属性是一个布尔值，用来指定导航时是否替换当前的历史记录。如果设置为true，则替换当前的历史记录，默认值为false。

假设有如下导航，view1 -> view2 -> view3，如果在view2 -> view3的导航中设置replaceUrl为true，则导航结束后，浏览器url为/view3 浏览器的历史记录为view1 -> view3，而不是view1 -> view2 -> view3(view2被view3替换掉)。导航结束后，浏览器的url为/view3，点击浏览器的回退按钮，会回到/view1。

1 2	// from /view2 to /view3 router.navigate(['/view3'], { replaceUrl: true });

state

待续

info

待续

References

NavigationExtras