PrimeNG Steps 组件在 Angular 13 项目中不工作

Question

我在Angular13版本中创建了一个项目。我已经安装了 PrimeNG 控件（13.3.0 版本）。现在我想使用 Steps 控件 但它不起作用。在我的 帐户模块 中，我创建了一个文件夹，在该文件夹中，我有以下组件：

注册
组织
用户

现在我在注册组件中添加了 PrimeNG Steps 控件，以在其中加载组织和用户组件。这是注册组件的代码：

HTML:

<div class="mx-auto bg-normal" style="width:500px; margin-top:45px; margin-bottom:40px; text-align:center;">
    <h3>Register organization</h3>    
</div>

<p-steps [model]="items" [readonly]="false"></p-steps>

TS

ngOnInit(): void {
    this.items = [
      {
        label: 'Organization1',
        routerLink: 'organization'
      },
      {
        label: 'Account',
        routerLink: 'user-reg'
      }
    ];
  }

在我的会计-routing.module.ts 文件中，我有以下代码：

const routes: Routes = [
    { path: 'login', component: LoginComponent },
    { path: 'lockscreen', component: LockscreenComponent },
    {
        path: 'steps', component: SignupComponent,
        children: [
            { path: '', redirectTo: 'organization', pathMatch: 'full' },
            { path: 'organization', component: OrganizationComponent },
            { path: 'user-reg', component: UserComponent },
        ]
    },
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class AccountRoutingModule { }

但问题是组织或用户组件未在步骤中加载。

我还在 Account.module 文件中添加了步骤模块。我也没有在浏览器控制台中发现任何错误。谁能给我一些解决问题的建议？

Answer 1

这是我的答案。我忘了在步骤组件之后添加路由器指令。这是注册的最终代码 HTML:

<div class="mx-auto bg-normal" style="width:500px; margin-top:45px; margin-bottom:40px; text-align:center;">
    <h3>Register organization</h3>    
</div>

<p-steps [model]="items" [readonly]="false"></p-steps>
<br/>

<router-outlet></router-outlet>

PrimeNG Steps 组件在 Angular 13 项目中不工作

PrimeNG Steps component is not working in Angular 13 project

angular

primeng