Угловая проблема с роутером

Question

Я получил следующую структуру папок в своем угловом приложении.Я пытаюсь перейти от экрана «Просмотр ролей» к экрану «Обновление ролей» в событии нажатия кнопки.

Ниже приведены моисобытие нажатия кнопки.

public onButtonClick(data: any): any {

      this.router.navigate(['/admin/update-role']);

  }

, и я получил следующий код в моем

admin.module.ts

, но выдает ошибку 404, когдаЯ нажимаю на кнопку.Есть ли какая-либо ошибка в том, что я использую путь детей?

const routes: Routes = [

  {
    path: 'view-roles', component: ViewRolesComponent, data: { breadcrumbs: 'Roles' }, 
    children: [
      { path: './update-role', component: UpdateRoleComponent, data: { breadcrumbs: 'Role' } }
    ]
  }

];

Answer 1

Мои маршруты

const routes: Routes = [
  {
    path: 'first',
    component: FirstComponent,
    children: [
      {
        path: 'second',
        component: SecondComponent
      }
    ]
  }
];

Мой компонент верхнего уровня

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.scss']
})
export class FirstComponent {
  constructor(private router: Router,
              private route: ActivatedRoute) { }
  onClick() {
    this.router.navigate(['second'], { relativeTo: this.route });
  }
}

и мой шаблон компонента верхнего уровня:

<p (click)="onClick()">
  first works!
</p>

<router-outlet></router-outlet>

Answer 2

Измените путь вашего ребенка на

children: [{ path: 'update-role', component: UpdateRoleComponent, data: { breadcrumbs: 'Role' }]

и измените код навигации следующим образом:

 this.router.navigate(['/update-role'], { relativeTo: this.route });