在动态对话框priemng中使用steps组件实现路由

Question

任何人都可以帮助我在 primeng 的动态对话框中实现步骤组件吗？我正在开发一个示例项目，我需要在对话框中实现登录屏幕，其中包括多个步骤，例如在第一步中输入基本信息，然后在下一步中输入有关用户的更多详细信息。

当我从一个步骤移动到另一步骤时，我想导航到不同的组件，同时停留在动态对话框中。

非常感谢任何一般性指示。谢谢你

Answer 1

我认为这样可以实现：

根应用程序组件引导：

import { Component } from '@angular/core';
import { RouterOutlet, provideRouter } from '@angular/router';
import { bootstrapApplication } from '@angular/platform-browser';
import { provideAnimations } from '@angular/platform-browser/animations';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>Hello from {{ name }}!</h1>
    <router-outlet></router-outlet>
  `,
  imports: [RouterOutlet],
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App, {
  providers: [
    provideAnimations(),
    provideRouter([
      {
        path: '',
        loadComponent: () =>
          import('./components/my-page/my-page.component').then(
            (c) => c.MyPageComponent
          ),
        children: [
          {
            path: '',
            pathMatch: 'full',
            redirectTo: 'step-one',
          },
          {
            path: 'step-one',
            loadComponent: () =>
              import(
                './components/my-page/steps/1-step-one/step-one.component'
              ).then((c) => c.StepOneComponent),
          },
          {
            path: 'step-two',
            loadComponent: () =>
              import(
                './components/my-page/steps/2-step-two/step-two.component'
              ).then((c) => c.StepTwoComponent),
          },
          {
            path: 'step-three',
            loadComponent: () =>
              import(
                './components/my-page/steps/3-step-three/step-three.component'
              ).then((c) => c.StepThreeComponent),
          },
        ],
      },
    ]),
  ],
});

样式.scss：

@import 'primeng/resources/themes/lara-light-blue/theme.css';
@import 'primeng/resources/primeng.css';
@import 'primeicons/primeicons.css';
@import 'primeflex/primeflex.css';

将显示对话框的页面组件：

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MenuItem } from 'primeng/api';
import { DialogModule } from 'primeng/dialog';
import { ButtonModule } from 'primeng/button';
import { StepsModule } from 'primeng/steps';

@Component({
  templateUrl: './my-page.component.html',
  standalone: true,
  imports: [DialogModule, StepsModule, ButtonModule, RouterOutlet],
})
export class MyPageComponent {
  display: boolean = true;
  items: MenuItem[] = [
    { label: 'Step One', routerLink: 'step-one' },
    { label: 'Step Two', routerLink: 'step-two' },
    { label: 'Step Three', routerLink: 'step-three' },
  ];

  constructor() {}

  show(): void {
    this.display = true;
  }
}

第一步组件：

<h2>Step One</h2>
<div class="flex justify-content-end">
  <p-button icon="pi pi-chevron-right" routerLink="/step-two"></p-button>
</div>


import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ButtonModule } from 'primeng/button';

@Component({
  templateUrl: './step-one.component.html',
  standalone: true,
  imports: [RouterLink, ButtonModule],
})
export class StepOneComponent {}

第二步组件：

<h2>Step Two</h2>
<div class="flex justify-content-between">
  <p-button icon="pi pi-chevron-left" routerLink="/step-one"></p-button>
  <p-button icon="pi pi-chevron-right" routerLink="/step-three"></p-button>
</div>


import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ButtonModule } from 'primeng/button';

@Component({
  templateUrl: './step-two.component.html',
  standalone: true,
  imports: [RouterLink, ButtonModule],
})
export class StepTwoComponent {}

第三步组件：

<h2>Step Three</h2>
<div class="flex justify-content-start">
  <p-button icon="pi pi-chevron-left" routerLink="/step-two"></p-button>
</div>

import { Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { ButtonModule } from 'primeng/button';

@Component({
  templateUrl: './step-three.component.html',
  standalone: true,
  imports: [RouterLink, ButtonModule],
})
export class StepThreeComponent {}

最后但并非最不重要的一点:) stackblitz@demo