在角度我正在路由到同一模块的不同组件路由，url正在改变但视图没有改变答案

【问题标题】：In angular I am routing to a different component route of the same module, url is changing but the view is not changing在角度我正在路由到同一模块的不同组件路由，url正在改变但视图没有改变
【发布时间】：2020-04-08 13:21:15
【问题描述】：

我是 Angular 的新手，在 Angular 6 中，我试图从另一个组件路由一个组件，这两个组件属于同一个模块。以下代码正在更改 url，但视图没有更改。这是我的第一个组件 componentA.html 的 html：

<div class="tp-content" routerLink="./details/{{tp.name}}"></div>

tp-component-routing.ts ：

import { tpListComponent } from './tp-list/tp-list.component';
import { tpComponent } from './tp/tp.component';
import { DetailedInfoComponent } from './detailed-info/detailed-info.component';

const routes: Routes = [
{
    path: 'tp',
    component: tpComponent,
    children: [
        {
            path: 'list',
            component: tpListComponent
        },
        {
            path: 'details/:id',
            component: DetailedInfoComponent
        }
    ]
}

];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]

})

export class tpRoutingModule { }

app-routing.module.ts

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

import { DetailedInfoComponent } from './touchpoint/detailed-info/detailed-info.component';


const routes: Routes = [
  { path: '', redirectTo: '/touchpoint/list', pathMatch: 'full' },
  {path: 'details/:id',component: DetailedInfoComponent }
];

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

URL 正在更改为 tp/details/id 以及我想要查看详细信息组件的视图。

【问题讨论】：

你的<router-outlet></router-outlet>在哪里？

标签： angular url routes angular6 angular-routing

【解决方案1】：

试试这个。 app.component.ts

<router-outlet></router-outlet>

tp.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { tplist } from '../tp-list;
import { detailinfo } from '../detailinfo;
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [ TplistComponent, DetailInfoComponent ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
    ]
})
export class TpModule { }

app-module.ts

@NgModule({
      imports: [
       tpModule
        ]
    })
    export class AppModule { }

app.routing.ts

const routes: Routes = [
  {
    path: '/tslist',
    component: TpListComponent,
    pathMatch: 'full'
  },
  {
    path: '/detailInfo/:Id',
    component: DetailInfoComponent,
    pathMatch: 'full'
  },

【讨论】：

tpComponent 是一个模块，里面有多个组件，所以默认情况下它正在加载 tpList，点击 tpList 元素我想重定向到 tpDetails 组件。
很抱歉，您的问题并未提供有关您想要达到的目标的详细信息。请阅读本文实现模块级路由medium.com/@astamataris/…
你不应该在应用路由和模块路由中添加路由。请分享您的 tp 模块的定义。上面的博客分享一定会对你有所帮助
我有一个 app-componet.html，它只有 router-outlet 标签，然后我有 tp-module，里面有 2 个组件 tp-component & tp-details 组件，现在我想单击 tp-component 元素时，从 tp-component 重定向到 tp-details 组件。我已经发布的带有代码的相关文件。
根据您的反馈更改了我的答案。如果仍然不清楚，请分享组件。

【解决方案2】：

是的，乔尔是对的。你的<router-outlet></router-outlet> 在哪里路由视图在这些标签内呈现。

【讨论】：

在 app.component.html 中，如果我也将它保存在 tpComponent.html 中。第一个组件在单击时呈现两次，第二个组件在第一个组件之后呈现，但我只希望在重定向时单独使用它。
app.component.html 只有

【解决方案3】：

您还需要添加<router-outlet>。请将这些添加到您要加载两个子组件的位置。即在你的情况下 tpComponent.html ：

<router-outlet></router-outlet>

【讨论】：

在 app.component.html 中，如果我也将它保存在 tpComponent.html 中。第一个组件在单击时呈现两次，第二个组件在第一个组件之后呈现，但我只希望在重定向时单独使用它。