使用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';

編輯

您確定需要router relativeTo位嗎？ 乍一看，您似乎沒有。

Answer 2

relativeTo參數采用對已激活路線的引用：

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

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