如何在Angular中溃烂到子路线？

Question

我只是进入Angular，所以也许这是一个小问题。 我在导航到[routerLink]

的路线时遇到麻烦

这是我的阶层

/
-- /header
-- /home
-- /item1
---- /dashboard
---- /sub1
---- /sub2
-- /item2
---- /dashboard
---- /sub1
---- /sub2
...

在"/"目录中，我正在搜索USB设备，一旦我的应用找到它，该应用就会重定向到"/home"

在我的home组件中，我有可变数量的物品。这些项目中的每一个都有相同的子目录："item2/dashboard", "item2/sub1",...（仪表盘等对于每个项目而言看起来都是不同的，并且是唯一的组件，但是对于每个项目而言，路由结构都是相同的）

我的标头组件是引导导航栏，并且带有

[hidden]="!(this.router.url !== '/' && this.router.url !== '/home')"

当我不在"/"或"/home"路线中时，会显示

新的导航项（仪表板，sub1，sub2等）。这样，当我进入item-component时，头就可以动态扩展。 导航栏如下所示：

之前：

之后：

从家到我的项目导航就像一种魅力。输入项目时，它会自动重定向到"Item/dashboard"。当我手动输入网址时，我还可以访问每个组件。

现在是我的问题：

当我进入Item1 / dashboard并想通过导航栏转到Item1 / sub1时，我想使用相对路径执行此操作（因为每个Item的设置方式均相同），但出现以下错误：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'sub1'
Error: Cannot match any routes. URL Segment: 'sub1'

Navitim代码：

<li class="nav-item active" [hidden]="!(this.router.url !== '/' && this.router.url !== '/home')">
    <a class="nav-link" [routerLink]="['../sub1']">
        sub1
    </a>
</li>

我的路线：

const routes: Routes = [
 { path: '', component: LoadingComponent, pathMatch: 'full' },
 { path: 'home', component: HomeComponent },
 { path: 'item1', component: Item1Component, children: ITEM1_ROUTES },
 { path: 'item2', component: Item2Component, children: ITEM2_ROUTES },
 ...
];

我的孩子路由：

export const ITEM1_ROUTES: Routes = [
 { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
 { path: 'dashboard', component: Item1DashboardComponent },
 { path: 'sub1', component: Item1Sub1Component },
 { path: 'sub2', component: Item1Sub2Component },
 { path: 'sub3', component: Item1Sub3Component },
 { path: 'sub4', component: Item1Sub4Component }
];

为什么我不能相对访问子路线？

Answer 1

如果要相对导航，则需要提供新路线相对的路线。

我认为您无法在模板中实现。有关在TS类中以编程方式执行此操作的方法，请参见https://angular.io/api/router/NavigationExtras#relativeTo

Answer 2

如果您尚未解决此问题，则应在Angular应用程序中查找子路线：

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList 
    children: [
      { path: '', redirectTo: 'overview', pathMatch: 'full' },
      { path: 'overview', component: Overview },
      { path: 'specs', component: Specs }
    ]
  }
];

，如果您想导航到任何子路线，都可以这样做

//This is wrong url and angular doesn't know where to navigate
<a class="nav-link" [routerLink]="['../sub1']">
        sub1
</a>

// This is the right way to navigate
// parent-route/child-route
product-list
<a class="nav-link" [routerLink]="['/product-list/overview']">
        Product List overview
</a>

还请注意，如果您未在网址前添加“ /”，那么此时您将相对地导航到您的位置

例如，现在您在/feed页面上，如果不使用/进行这样的导航，则会转到/feed/product-list/overview，您会得到一个错误提示，因为您没有有这样的路线，因此请确保用routerLinnk /

给[routerLink]="/product-list/overview"加上星号

<a class="nav-link" [routerLink]="['product-list/overview']">
        Product List overview
</a>

当您必须从routerLink导航到特定产品=> /时，一开始就可以使用/product，而无需[routerLink]="[product/ , productId]"，以便从当前位置导航到特定产品