Question

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

在这些路由模块中，我配置了一些子路由，并且在导航栏（在feature.component.html中）具有一些相对的routerLink（在第一段中没有'/'，请参见https://angular.io/api/router/RouterLink）。但是，这无法正常工作。它没有尝试在localhost：4200 / child和localhost：4200 / grandchild之间切换，而是尝试从localhost：4200 / child变为localhost：4200 / child / grandchild；我想了解为什么会这样。使用绝对的routerLink（例如“ / child”），它可以工作；但据了解，路由也应该在没有前斜杠的情况下工作，因为路由器会根据激活的路由检查子级

摘自官方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）”，错误：错误：无法匹配任何路线。网址区隔：“ child” 在ApplyRedirects.push ../ node_modules / @ angu ...}

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

Answer 1

首先单击'CHILD'= 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 docs说，路由器在链接参数列表中支持类似目录的语法，以帮助指导查找路由名称。因此，它看起来要使用什么路径（相对或绝对）以及去向。如果将类比与目录语法一起使用，则当前目录是激活的路由（在这种情况下，child进入localhost:4200/child之后）：

routerLink =“ grandchild”-（相对路径）在子目录中查找孙子，然后转到子/孙子

routerLink =“ ./ grandchild”-（相对路径）与以前的

相同

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

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

我希望这会有所帮助）

不带'/'的相对路由会将内容附加到url而不是替换部分url

1 个答案: