PrimeNG Steps 组件在 Angular 13 项目中不工作
PrimeNG Steps component is not working in Angular 13 project
我在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 文件中添加了步骤模块。我也没有在浏览器控制台中发现任何错误。谁能给我一些解决问题的建议?
这是我的答案。我忘了在步骤组件之后添加路由器指令。这是注册的最终代码 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>
我在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 文件中添加了步骤模块。我也没有在浏览器控制台中发现任何错误。谁能给我一些解决问题的建议?
这是我的答案。我忘了在步骤组件之后添加路由器指令。这是注册的最终代码 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>