使用 PrimeNG Steps 组件 - 似乎无法让它遵循 "routerLink"

Question

我是 PrimeNG 的新手，不是最强的 angular 特工。

我正在尝试在我的项目中设置一个“步骤”流程。路由器 table 工作正常，我可以导航到“菜单”列表中列出的页面。 . .但不是通过步骤。

我在 visual studio 内没有收到任何警报，该项目运行正常。编号（和命名）的步骤是可见的，但它没有加载到相关页面（即“/file”）中。

提前致谢。

ts代码-

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/api';

@Component({
  selector: 'app-steps',
  templateUrl: './steps.component.html',
  styleUrls: ['./steps.component.css']
})
export class StepsComponent implements OnInit {


  items: MenuItem[];

  constructor()  {}

  ngOnInit() {
      this.items = [
        {
            label: 'Upload File',
            routerLink: '/file'
        },
          {
              label: 'Date',
              routerLink: '2_date'
          },
          {
              label: 'Further details',
              routerLink: '3_details'
          },
          {
              label: 'Finalise',
              routerLink: '4_id'
          }
      ];

  }


  }

和HTML

<div class="card">
    <p-toast></p-toast>
    <p-steps [model]="items" [readonly]="true"></p-steps>
</div>

<router-outlet></router-outlet>

根据要求更新

这里是路由模块涉及到的Routes。

  //steps
  {
    path: 'file',
    component: ChoseFileComponent,
  },  {
    path: '2_date',
    component: DatepickerComponent,
  },  {
    path: '3_details',
    component: DetailsComponent,
  },  {
    path: '4_id',
    component: IDComponent,
  },
]

路由器在 app-component.ts

中的菜单组件中工作正常

（小片段）

        {
                        items:[{
                            label:'Merge record',
                            icon: 'pi pi-user-edit',
                            routerLink:['merge']}]
                    },
                    {
                        items:[{
                            label:'Add to Team',
                            icon: 'pi pi-fw pi-users',
                            routerLink:['team']}]                    },
                ],
            ]
    ```
As you can see i've been messing around with path ID's to try and get the desired behaviour.

Answer 1

我不太清楚，您想通过单击步骤或什么来导航。如果您想通过单击步骤进行导航，则必须从 p-steps

[readonly]="true"

Answer 2

查看路由配置，app-steps似乎是一个单独的组件，它应该将您希望在每个步骤上显示的组件的路由作为其子路由，如下所示代码片段。

{
  path: 'steps',
  component: StepsComponent,
  children: [{
      path: '',
      redirectTo: 'file',
      pathMatch: 'full'
    },
    {
      path: 'file',
      component: FileComponent
    },
    {
      path: 'date',
      component: DateComponent
    },
    {
      path: 'details',
      component: DetailsComponent
    },
    {
      path: 'id',
      component: IdComponent
    }
  ],
},

另外，在app-steps组件中，定义MenuItem[]类型的items数组，如下所示，

this.items = [{
    label: 'Upload File',
    routerLink: 'file' // Remove the '/', prefixing the route definition
  },
  {
    label: 'Date',
    routerLink: 'date'
  },
  {
    label: 'Further details',
    routerLink: 'details'
  },
  {
    label: 'Finalise',
    routerLink: 'id'
  }
];

为了您的参考，请找到一个 link 的工作演示 here

使用 PrimeNG Steps 组件 - 似乎无法让它遵循 "routerLink"

Using PrimeNG Steps component - can't seem to get it to follow the "routerLink"

primeng

angular