在组件之间导航时保​​持路由一致

Question

我有一台连接多个组件的路由器。每个组件都可以修改路由，以便保留其状态（将粘贴复制到某人等）。

示例：

1. /route/mycomp
2. 玩一些字段
3. 路线变为/route/mycomp;field=value
4. 点击/route/othercomp，路线适应
5. 点击/route/mycomp
6. 路线变为route/mycomp

我希望它保持/route/mycomp;field=value，因为组件本身没有改变。

我尝试了什么：

• 更改我的RouteReuseStrategy实施
• 在每个过滤器操作后保存每个组件中的URL
• 更改DOM

有什么想法吗？

Angular 2.3.1。

Answer 1

您可以使用＆＃39; skipLocationChange＆＃39;

<a [routerLink]='xxx' skipLocationChange>next</a>

或

router.navigateByUrl('xxx', {skipLocationChange:true｝

参考：https://angular.io/docs/ts/latest/api/router/index/NavigationExtras-interface.html

Answer 2

本讲座有所帮助：

How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2

import { RouteReuseStrategy } from '@angular/router'
import { DetachedRouteHandle } from '@angular/router'
import { ActivatedRouteSnapshot } from '@angular/router'

/**
 * Basic implementation comes from @manfredsteyer.
 * We extended it to add functionality described in current issue.
 */
export class CustomReuseStrategy implements RouteReuseStrategy {

  tab: string = null
  handlers: {[key: string]: any/*DetachedRouteHandle*/} = {}

  /// Should detach and not destroy: true (always)
  shouldDetach(route: ActivatedRouteSnapshot): boolean {

    return true

  }

  /// If detached, store
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {

    this.handlers[route.routeConfig.path] = {
      handle: handle,
      params: route.params
    }

  }

  /// Should reuse existing component: if avalaible
  shouldAttach(route: ActivatedRouteSnapshot): boolean {

    // Avoid multiple calls
    this.tab = route.routeConfig.path // current tab

    // the double exclamation mark (!!) casts to actual boolean
    return !!route.routeConfig && !!this.handlers[route.routeConfig.path]

  }

  /// Should we retrieve component and parameters
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {

    if (!route.routeConfig || !this.handlers[route.routeConfig.path])
      return null

    let handler = this.handlers[route.routeConfig.path]
    let sentParameters = route.url.slice(-1)[0].parameters
    let parameters = null

    // Send back params (only if current tab, last retrieve call)
    if (this.tab === route.routeConfig.path) {
      // Which parameters to send to the retrieved component ?

      // If you send parameters from one panel to another
      // (like clicking on a button to access a related object in another panel),
      // then use them
      if (Object.keys(sentParameters).length)
        parameters = sentParameters
      // if you don't, use the old ones (cf. **Expected behavior**)
      else
        parameters = handler.params

      // urlParse() is in each panel component (inheritance is your friend)
      // and can do some specific parameters name and/or value parsing
      // before injecting them into said component
      handler.handle.componentRef.instance.urlParse(parameters)
    }

    return handler.handle

  }

  // I'm not too sure about this part
  /// Should we load/retrieve other component: if path is different
  //  @todo /!\ if routeConfig is null, say "yes"
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {

    // @todo: strange case with null/null values
    return future.routeConfig === curr.routeConfig

  }

}

（github的复制粘贴。）