1

我是 Angular 新手，我正在尝试了解子路由的路由过程。如此处所述（https://angular.io/guide/router#milestone-4-crisis-center-feature），我希望在具有单独路由模块的单独功能模块中具有不同的应用程序功能。

在这些路由模块中，我配置了一些子路由，并且我有一个导航栏（在 feature.component.html 中），其中包含一些相对的 routerLinks（第一段中没有“/”，请参阅https://angular.io/api/路由器/路由器链接）。但是，这并没有按预期工作。它不是在 localhost:4200/child 和 localhost:4200/grandchild 之间切换，而是尝试从 localhost:4200/child 转到 localhost:4200/child/grandchild；我想了解为什么会这样。使用像'/child'这样的绝对routerLink，它可以工作；但据了解路由它也应该在没有前导斜杠的情况下工作，因为路由器然后根据激活的路由检查子节点

取自官方 Angular 文档：

第一个段名称可以在前面加上 /、./ 或 ../：

  • 如果第一段以 / 开头，路由器将从应用程序的根目录查找路由。
  • 如果第一段以 ./ 开头，或者不以斜杠开头，则路由器将改为查找当前激活路由的子节点。
  • 如果第一段以 ../ 开头，路由器将上升一级。

feature.component.ts（仅限 NgModule）

@NgModule({
  declarations: [
    FeatureComponent,
    ChildComponent,
    GrandchildComponent
  ],
  imports: [
    CommonModule,
    FeatureRoutingModule
  ]
})

feature.component.html

<div class="border border-primary">
  <h1>feature.component</h1>
  <div>
    <nav class="navbar navbar-expand bg-dark navbar-dark">
      <div class="navbar-nav">
        <a class="nav-item nav-link" routerLink="child">CHILD</a>
        <a class="nav-item nav-link" routerLink="grandchild">GRANDCHILD</a>
      </div>
    </nav>
  </div>
  <router-outlet></router-outlet>
</div>

feature-routing.module.ts（仅路由）

const routes: Routes = [
  {
    path: '', component: FeatureComponent, children:
      [
        { path: 'child', component: ChildComponent },
        { path: 'grandchild', component: GrandchildComponent }
      ]
  }
];

app.component.html

<h1>app.component</h1>
<router-outlet></router-outlet>

app-module.ts（仅限 NgModule）

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FeatureModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
  • 在第一次加载时，我看到带有导航栏的功能组件。网址说： localhost:4200
  • 首先点击 'CHILD' = URL 更改为localhost:4200/child --> 现在可以了
  • 第二次单击“GRANDCHILD”，它会尝试转到localhost:4200/child/(grandchild)，取自控制台输出：

    NavigationError {id: 32, url: "/child/(grandchild)", error: Error: 无法匹配任何路由。URL 段：ApplyRedirects.push../node_modules/@angu 中的“孩子”…}

为什么会这样？如何在控制台中输出激活的路由以更好地理解所有内容？

4

1 回答 1

0

首先单击“孩子”= URL 更改为 localhost:4200/child --> 这 > 现在可以第二次单击“GRANDCHILD”，它会尝试转到 >localhost:4200/child/(grandchild)

但在那种情况下，激活的路由是child（在转到 localhost:4200/child 之后），因为激活的路由包含有关与在插座中加载的组件关联的路由的信息（路由child与 关联ChildComponent）。指定

routerLink="grandchild"

// Or

routerLink="./grandchild"

意味着grandchild必须附加到child（激活的路线）。为了达到期望，您需要指定如下内容：

// adding / means to go to app root path,
// and FeatureComponent has path: '',
// so it starts from root path
routerLink="/grandchild"

或者：

// adding ../ means go one level up (remove "child")
routerLink="../grandchild"

使用像'/child'这样的绝对routerLink，它可以工作；

在顶层，以 / 开头的路径指的是应用程序的根目录（来自 Angular Docs）。所以它进入应用程序的根目录，它也可以按照你的意愿工作，因为FeatureComponent它具有路径：''，并且不是具有某些路径的其他组件的子组件，因此它从根目录开始。

但是据了解路由它也应该在没有前导斜杠的情况下工作，因为路由器然后根据激活的路由检查子节点

Angular 文档说路由器在链接参数列表中支持类似目录的语法，以帮助指导路由名称查找。所以它看起来使用什么路径（相对或绝对）以及去哪里。如果使用目录语法类比，当前目录是一个激活的路由（child在这种情况下，在 go to 之后localhost:4200/child）：

routerLink="grandchild" -（相对路径）在子目录中查找孙子并转到子/孙子

routerLink="./grandchild" - （相对路径）同上

routerLink="../grandchild" -（相对路径）从当前目录上移一个目录

routerLink="/grandchild" -（绝对路径）在根目录中查找孙子并转到 /grandchild

我希望这有帮助）

于 2019-02-09T14:17:44.087 回答