Question

我是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一起更改，而我要查看DetailsInfoComponent。

Answer 1

您还需要添加一个<router-outlet>。请将它们添加到要加载两个子组件的位置。即您的情况 tpComponent.html ：

<router-outlet></router-outlet>

Answer 2

是的，乔尔是对的。您的<router-outlet></router-outlet>在哪里路由视图显示在这些标记内。

Answer 3

尝试一下。 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'
  },

在角度我路由到同一模块的不同组件路由，URL在更改，但视图未更改

3 个答案: