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

问题描述

我对 PrimeNG 很陌生，而不是最强的角度操作员。

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

我在 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>

按要求更新

这是路由模块中涉及的路由。

  //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.

标签： angularprimeng

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

问题描述

解决方案

推荐阅读