嵌套路由链接Angular 4

时间:2017-08-11 14:29:07

标签: angular routing angular2-routing

这是我的当前设置

 - app (Folder)
  - app-routing.module.ts (File)
     - client (Folder)
         - client-routing.module.ts (File)
             - service (Folder)
                 - service-routing.module.ts (File)
                 - service1.componenent.ts (File)
                 - service2.componenent.ts (File)

所以,现在如果我在 service1.componenet 中使用 router.navigateByUrl ,我将不得不这样做:

this.router.navigateByUrl('/client/service2');

我必须继续嵌套路由模块,以便稍后知道该路由的"父母" 可能是个问题,我想知道是否有问题一个更强大,更有效的解决方案,而不是复制整个路线,如:

this.router.navigateByUrl( parentRoute + '/service2');

如果parentRoute它是嵌套路由的汇编。

1 个答案:

答案 0 :(得分:2)

您可以尝试使用ActivatedRoute中的service1component。 像这样:

import { Router, ActivatedRoute } from '@angular/router';

@Component({
...
})
export class Service1Component {
 constructor(
   private _router:Router,
   private _route: ActivatedRoute
 ){}

 ...

  navigate(){
    this._router.navigate(['./service2'],{
      relativeTo: this._route
    });
  }
}