角路由器导航问题

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

将孩子的路径更改为

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

并按如下所示更改导航代码，

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

Answer 2

我的路线

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>