无“/”相对路由附加事情URL而不是替换URL的一部分

Question

我是新来的角，我试图了解与孩子路由信息的过程。如这里（https://angular.io/guide/router#milestone-4-crisis-center-feature）所描述的，我想在与单独的路由模块独立的功能模块不同的应用程序的功能。

这些路由模块内I（在第一段中没有“/”，见https://angular.io/api/router/RouterLink）与一些routerLinks是相对配置的一些子路由和我有一个导航栏（在feature.component.html）。然而，这并不按预期工作。而不是本地主机之间切换：4200 /儿童和本地主机：4200 /孙子，它试图从localhost走：4200 /孩子到localhost：4200 /孩子/孙子;我想知道为什么会这样。有了这样“/子”它的工作原理是绝对routerLink;不过，据了解是路由也应该不带斜线工作，因为路由器会检查儿童，立足于激活路线

从官方的角度文档采取：

第一段名称可以与/，./或../预先考虑：

• 如果第一段与/开始，路由器将查找路线从应用程序的根目录。
• 如果第一段以./开头，或者不以斜杠，路由器将代替看在当前激活路由的孩子。
• 如果第一段与../开始，则路由器会上升一个层次。

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>

功能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]
})

• 在第一负载我看到与导航栏的特征成分。网址说：本地主机：4200
• 在“孩子”第一次点击=该URL改变为localhost：4200 /儿童 - >这是确定现在
• 对“孙子”第二次点击，它会尝试去到本地主机：4200 /孩子/（孙子），从控制台输出采取： NavigationError {ID：32，网址： “/孩子/（孙子）”，错误：错误：无法匹配任何路线。 URL段： '孩子' 在ApplyRedirects.push ../ node_modules / @安固...}

这究竟是为什么？我该如何输出在控制台中激活途径去了解一切更好一点？

Answer 1

在“孩子”第一次点击=该URL改变为localhost：4200 /儿童 - >这>就可以了，现在第二次点击“孙子”，它会尝试去>本地主机：4200 /孩子/（孙子）

但是，在这种情况下，激活途径是child（将本地主机后：4200 /子），因为激活的路径包含在插座装（路线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"

有了这样“/子”它的工作原理是绝对routerLink;

在顶层，与开始的路径/指（从角文档）的应用程序的根。如此这般以应用程序的根，只要你想，因为FeatureComponent具有路径也可以工作：“”，而不是用一些其他的路径组件的孩子，所以它从根开始。

不过，据了解是路由也应该不带斜线工作，因为路由器会检查儿童，立足于激活路线

角文档说，该路由器支持一个链路参数列出目录的语法来帮助引导路线名称查找。因此，它的外观要使用的路径（相对或绝对）和去哪里。如果使用类比目录语法，当前目录是激活的航线（child在这种情况下，要localhost:4200/child后）：

routerLink =“孙子” - （相对路径）寻找在子目录孙子，去子/孙

routerLink =“./孙子” - （相对路径）相同先前

routerLink =“../孙子” - （相对路径）去一个目录从目前的目录

routerLink =“/孙子” - （绝对路径）寻找在根目录下孙子，去/孙子

我希望这有帮助）