角度路由器导航问题

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>