Angular Child Route 不起作用并将我重定向到同一页面答案

【问题标题】：Angular Child Route not working and redirect me to the same pageAngular Child Route 不起作用并将我重定向到同一页面
【发布时间】：2018-12-01 14:03:21
【问题描述】：

我已尝试更改我的route，但到目前为止我没有发现任何问题。但是，如果您发现任何缺陷，请告诉我，我也尝试找到任何类型错误并仔细检查我的组件，到目前为止我还没有找到，但然后再次让我知道。我尝试输入我的路由 URL，它可以工作，但它显示相同的页面。它不会将我重定向到我想要的页面。我什至删除并安装了node module，但不幸的是问题仍然存在。老实说，我只是想试试我是否仍然可以在 Angular 6 中使用 child route。但无论如何我会为您提供路由模块、我的 html 组件和我的其他组件。

首先关闭我的路线模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContactComponent } from './contact/contact.component';
import { ComponentDetailComponent } from './contact/component-detail/component-detail.component';
import { ContactDescriptionComponent } from './contact/component-detail/contact-description/contact-description.component';

const routes: Routes = [

  {
    path: 'contact',
    component: ContactComponent,
    children: [
        {
            path: ':id',
            component: ComponentDetailComponent,
            children: [
                {
                    path: 'details/:name',
                    component: ContactDescriptionComponent
                }
            ]
        }
      ]
   },

];

@NgModule({
   imports: [ RouterModule.forRoot(routes) ],
   exports: [ RouterModule ]
})
export class AppRoutingModule { }

我的 app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { ContactComponent } from './contact/contact.component';
import { ComponentDetailComponent } from './contact/component-detail/component-detail.component';
import { ContactDescriptionComponent } from './contact/component-detail/contact-description/contact-description.component';

@NgModule({
   declarations: [
     AppComponent,
     ContactComponent,
     ComponentDetailComponent,
     ContactDescriptionComponent
],
imports: [
     BrowserModule,
     AppRoutingModule
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

我的 app.component.html：

<app-contact></app-contact>
<router-outlet></router-outlet>

我的contact.component.html：

<h1>Contact works!</h1>
<a [routerLink]="['id']">Contact Details</a>

我的组件-detail.component.html:

<h3>Component-detail Works!</h3>
<a [routerLink]="['details','name']" >Description</a>

最后是我的contact-description.component.html：

<h3>Contact-description Works!</h3>

如果你有什么想让我补充的，请告诉我。

【问题讨论】：

您没有在 ComponentDetailComponent 中提供任何路由器插座，因此 Angular 不知道在哪里渲染您的孩子。
@jriccrussel 您是否尝试过提供的解决方案？您也可以查看演示。
@Amit Chigadani 感谢您制作演示，但不幸的是它显示了一个空白页面
您是否检查了重定向到 URL /contact/id/details/name ？它工作正常
或者直接重定向到 /contact/Id 然后点击描述链接。

标签： angular routes routerlink app-route

【解决方案1】：

component-detail 组件中缺少 <router-outlet></router-outlet>

看到这个工作DEMO

【讨论】：