Question

我的AppComponent有一个@RouteConfig装饰器，用于定义顶级路线：

@RouteConfig([
  {
    path: '/',
    name: 'Home',
    component: HomeComponent
  },
  {
    path: '/about',
    name: 'About',
    component: AboutComponent
  },
  {
    path: '/profile/...',
    name: 'Profile',
    component: ProfileComponent
  }
])

export class AppComponent {
}

我的ProfileComponent有一个@RouteConfig装饰器，用于定义Profile子路径：

@RouteConfig([
  {path: '/', component: ProfileDetailsComponent, name: 'View', useAsDefault: true},
  {path: '/:id', component: ProfileDetailsComponent, name: 'Public'},
  {path: '/edit', component: ProfileEditorComponent, name: 'Edit'},
])

export class ProfileComponent {
}

当我在ProfileDetailsComponent中时，我可以重定向到其他Profile路由但不能重定向到其他路由。我想避免使用navigateByUrl指定网址，而是使用navigate来改为使用路由名称。 E.g：

this.router.navigate(['View']); // Works
this.router.navigate(['About']); // Raises error that it does not exist

我在这里阅读了这个答案：Angular 2 - How to navigate to another route using this.router.parent.navigate('/about')

它使用：

this.router.parent.navigate(['About']);

哪种情况还可以，但只有当我在申报时知道重定向应该去的时候才能解决我的问题。我有多个级别的嵌套，并在运行时确定目标路由。我正在寻找一种方法来做类似的事情：

this.router.navigate(['Level1', 'Level2', 'Level3']);

这允许我在某处跟踪目标路线的完全限定名称。这有可能吗？

Answer 1

使用斜杠添加路由名称以指示路由是根路由

from theano import tensor as T
from theano.ifelse import ifelse
import theano, time, numpy

a,b = T.scalars('a','b')
x,y = T.matrices('x','y')

z_switch = T.switch(T.lt(a,b), T.mean(x), T.mean(y))
z_lazy = ifelse(T.lt(a,b), T.mean(x), T.mean(y))

f_switch = theano.function([a,b,x,y], z_switch,
                           mode=theano.Mode(linker='vm'))
f_lazyifelse = theano.function([a,b,x,y], z_lazy,
                               mode=theano.Mode(linker='vm'))

val1 = 0.
val2 = 1.
big_mat1 = numpy.ones((10000,1000))
big_mat2 = numpy.ones((10000,1000))

n_times = 10

tic = time.clock()
for i in range(n_times):
    f_switch(val1, val2, big_mat1, big_mat2)
print('time spent evaluating both values %f sec' % (time.clock()-tic))

tic = time.clock()
for i in range(n_times):
    f_lazyifelse(val1, val2, big_mat1, big_mat2)
print('time spent evaluating one value %f sec' % (time.clock()-tic))

Answer 2

这是微服务派上用场的地方，请查看service docs here。这个想法是父母可以听孩子的导航请求，孩子可以根据需要广播所说的变化。

让我们从一个简单的对象开始，它将存储路由名称和可选参数：

export class NavArgs {
   constructor(routeName: string, args?: any) { }
}

现在让我们定义微服务，rxjs这很容易：

import { Injectable } from '@angular/core'
import { Subject }    from 'rxjs/Subject';

@Injectable()
export class NavigationService {
  private navigationRequestedSource = new Subject<string>();

  onNavigationRequested$ = this.navigationRequestedSource.asObservable();

  requestNaivation(navArg: string) {
    this.navigationRequestedSource.next(mission)
  }
}

现在，子组件可以使用它并请求导航：

export class SomeChild {
   constructor(navService: NavigationService) { }
   invoke() {
      this.navService.requestNaivation(new NavArgs('SomeRoute'));
   }
}

父组件可以侦听所述请求并对其采取行动：

export class SomeParent {
   constructor(navService: NavigationService, router: Router) {
      this.navService
          .onNavigationRequested$
          .subscribe((navArgs: NavArgs) => {
              if (navArgs) {
                  if (navArgs.args) {
                      this.router.navigate([ navArgs.routeName, navArgs.args ]);
                  }
                  else {
                      this.router.navigate([ navArgs.routeName ]);
                  }
              }
      });
   }       
}

显然这是最基本的代码示例，需要更多的导入和错误处理等。但希望你明白了。

注意

确保父级和子级都使用此服务的相同实例非常重要，为此，您必须在使用它的最高级别将其设置为provider。这是因为默认情况下 Angular2 会为 DI 创建一个单例并使用分层方法。您必须确保不要错误地将其设置为较低级别的provider，否则它将无效。

如何使用angular2中的链接参数数组从子组件导航到上层路由？

2 个答案: