Дочерний компонент проблемы не отображается при нажатии на элемент в родительском компоненте

Question

Я работаю с angular, и у меня проблема с routerLink. Когда я нажал на тег tr таблицы, чтобы перейти к дочернему компоненту. URL все еще отображает дочерний маршрут, но дочерний компонент не отображается. Надеюсь, кто-нибудь поможет мне. Это мой код: Файл assign.component.html:

<a [routerLink]="['/abc']">go to ABC component</a>

файл assign.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AssignComponent } from './assign.component';
import { AbcComponent } from './abc/abc.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
 {
  path: 'abc',
  component: AbcComponent
 }
]
@NgModule({
imports: [
  CommonModule,
  RouterModule.forRoot(routes)
],
declarations: [
  AssignComponent,
  AbcComponent
 ]
})
export class AssignModule { }

Answer 1

Поместите <router-outlet></router-outlet> в ваш родительский HTML-файл, как показано ниже: -

assign.component.html

<a [routerLink]="['/abc']">go to ABC component</a>

<router-outlet></router-outlet>

Это необходимо, поскольку маршрут является дочерним маршрутом назначенного компонента, а при переходе к дочернему маршруту ему требуется место для рендеринга в HTML-файле назначенного компонента.

Надеюсь, это поможет!

Answer 2

Попробуйте написать так просто, как есть:

<a routerLink="/abc">go to ABC component</a>

и не забудьте добавить в html-файл родительского компонента (в основном app.component.html). Если модуль Assign является вашим родительским компонентом для abComponent, попробуйте добавить его в файл assign.component.html.

Спасибо

Answer 3

Вы положили <router-outlet></router-outlet> в HTML родительского компонента? Если нет, то поместите <router-outlet></router-outlet> в html родительского компонента.

Спасибо.