Angular Child Route不起作用，将我重定向到同一页面 [英] Angular Child Route not working and redirect me to the same page

问题描述

大家好，如果您有空闲时间，请帮助我解决我的问题。我似乎找不到可能的解决方案。因此，我尝试更改我的路线，到目前为止，我没有发现任何问题，但是如果您发现任何缺陷，请告诉我，我也尝试查找任何类型错误并仔细检查我的组件，到目前为止，我没有找到任何组件，但是再次让我知道。我尝试输入路线URL，但它可以正常显示，但不会显示相同的页面，也不会将我重定向到所需的页面。我什至删除并安装了 node模块，但是不幸的是问题仍然存在。老实说，我只想尝试在Angular 6中是否仍然可以使用 child route 。但是无论如何，我还是会为您提供route模块，我的html组件和其他组件。

Hi guys if you have a spare time please help me with my problem. I cant seem find a possible solution. So I've tried change my route and so far I didn't find any issues but if you find any flaws please let me know, also I try to find any type error and double-check my components, so far I didn't find one but then again let me know. I try to type my Route URL and it work but it displays the same page it wont redirect me to the page that I want. I even delete and install the node module, but unfortunately the problem is still the same. Honestly, I just wanna try if i could still use child route in Angular 6. But anyway Ill provide you route module, my html component and my other components.

首先是我的路线模块：

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：

My 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：

My app.component.html:

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

我的contact.component.html：

My contact.component.html:

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

我的component-detail.component.html：

My component-detail.component.html:

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

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

And lastly my contact-description.component.html:

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

如果您有什么想要我加起来的信息，请告诉我。谢谢，祝你好运

If you have anything would you like me to add up just let me know. Thank You and Good luck

推荐答案

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

You are missing <router-outlet></router-outlet> in component-detail component

请参见此工作演示

这篇关于Angular Child Route不起作用，将我重定向到同一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！