使用Angular2 / 4中的相对路径以编程方式路由到其他组件

Question

这是我的文件夹结构：

App
   -KitchenComponent
      -css
      -html
      -kitchen.component.ts
   -BedroomComponent
      -css
      -html
      -kitchen.component.ts
app.component.html
app.component.ts

我想使用相对路径以编程方式从厨房组件移动到卧室组件。

 KitchenComponent.html
 <button (click)="moveToBedroomComponent()"></button>

KithcenComponent.ts
Constructor(private router: Router){}
moveToBedroomComponent(){
   this.router.navigate(['bedroom'], {relativeTo:_____});
}

我认为我坚持在这里给出相对路径，投入很受欢迎。

Answer 1

首先，看到你的app.route.ts文件会很好。

我做那样的导航： this._router.navigate(['dashboard']);

我的app.route.ts包含{path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard]}

还要确保导入正确： import { Router, ActivatedRoute } from '@angular/router';

修改

您确定relativeTo中需要router位吗？乍一看，似乎你没有。

Answer 2

relativeTo参数获取对激活路径的引用：

@Component({...})
class KitchenCmp {
  constructor(private route: ActivatedRoute, private router: Router) {
  }

  moveToBedroomComponent(){
     this.router.navigate('../bedroom', {relativeTo:this.route});
  }
}