typescript - Angular: Göreli bir yol ile navigate yöntemi kullanarak alt bileşene yönlendirme çalışmıyor

Kullanılan örnek bu stackblitz'te verilmiştir

Yönlendirme bu şekilde yapılandırılmıştır

    RouterModule.forRoot([
      {
        path: 'login',
        component: LoginViewComponent,
        children: [
          { path: 'home', component: HomeViewComponent },
          { path: 'catalog/:id', component: CatalogViewComponent }
        ]
      },
      { path: '**', redirectTo: 'login' }
    ])
  ],

Giriş bileşenindeyken, bu mutlak rota ile ana bileşene gidebilirim

this.navigate(['login/home']);

Ayrıca navigateByUrl() yöntemini şöyle kullanabilirim

this.navigateByUrl(['login/home']);

Ama navigate() ile göreli olarak nasıl yönlendirme yapacağımı anlamıyorum

this.navigate(['home'], { relativeTo: this.route });
this.navigate(['/home'], { relativeTo: this.route });

Bu yöntemlerin hiçbiri homeComponent'e yönlendirme yapmıyor

Cevap #1

Alt rotalar oluşturmaktansa, aynı ada sahip başka bir yolum var:

app-routing.module.ts

{ path: "activity", component: ActivityComponent },
{ path: "activity/orders", component: OrdersComponent },

Eğer activity bileşenindeysem, siparişlere şu şekilde giderim:

this.router.navigate(["orders"], { relativeTo: this.route });`

aktivite bileşeninde import ve yapıcı

import { Router, ActivatedRoute } from "@angular/router";
constructor(
  private router: Router,
  private route: ActivatedRoute,
) {

İlgili makaleler