Question

我想在不重新实例化的情况下为同一个组件使用多个路由。

示例路线：

[
  { path: 'test/:p1', component:component },
  { path: 'test/:p1/:p2', component:component },
  { path: 'test/:p1/:p2/:p3', component:component }
]

当我在路径之间切换时，组件重新实例化，并且再次运行解析器。我提醒一下，不要使用查询参数。

我的案例在本期中有详细描述： Optional Parameters for angular2 routes #12347

有什么想法吗？我需要使用查询参数吗？

我的解析器代码：

@Injectable()
export class MyResolver implements Resolve<MyObject[]> {

  constructor(private myService: MyService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MyObject[]> {
    return this.myService.getData(route.params.id);
  }

}

Answer 1

那不行吗？它更像是一种解决方法，而不是一种真正的解决方案，但这是我能想到的最好的方法：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<MyObject[]> | null {
  if (route.includes('test')) {
    return null;
  }

  return this.myService.getData(route.params.id);
}

然后你也可以在你的组件中管理这个案例，你可以避免在你的解析器返回null时做任何事情。

Answer 2

使用URLMatcher：

进行解决方法

const routes: Routes = [{
  matcher: urlSegments => 
    urlSegments[0] && urlSegments[0].path === 'test' ? {
      consumed: urlSegments,
      posParams: {
        ...urlSegments[1] && {p1: urlSegments[1]},
        ...urlSegments[2] && {p2: urlSegments[2]},
        ...urlSegments[3] && {p3: urlSegments[3]}
      }
    } :
    null,
  component: component
}];

Angular 2 - 相同组件的多个路由，无需重新实例化？

2 个答案: