angular - 动态对话框中的 PrimeNG 步骤

Question

我创建了一个类似于 primeNG page 的步骤组件我想把他放在一个 dynamic dialog 里面但在应用它之后，“第 1 步”和“第 2 步”不会呈现。

查看代码，我发现关键部分是我们打开对话框的方式。我们从 PrimeNG 样本中得到了

show() {
    const ref = this.dialogService.open(CarsListDemo, {
        header: 'Choose a Car',
        width: '70%'
    });
}

这会直接呈现组件(或者...这是如何通过路由传递的？)并且对于我们需要定义 routerLink 的步骤来定义步骤导航。

 this.items = [{
                label: 'Personal',
                routerLink: 'personal'
            },
           {//more steps}

路由

@NgModule({
    imports: [
        RouterModule.forChild([
            {path:'',component: StepsDemo, children:[
                {path:'', redirectTo: 'personal', pathMatch: 'full'},
                {path: 'personal', component: PersonalDemo},
                {path: 'confirmation', component: ConfirmationDemo},
                {path: 'seat', component: SeatDemo},
                {path: 'payment', component: PaymentDemo}
            ]}
        ])
    ],
    exports: [
        RouterModule
    ]
})

作为简历，我在定义对话框中的步骤时遇到了一些问题。当我们做的时候

this.dialogService.open(CarsListDemo...

我们调用哪条路由？或者如何在open 方法上定义路由？

Answer 1

您不需要使用 DynamicDialog，因为 dynamicDialog 使用组件基来呈现对话框内容与 Steps 不匹配。

我建议您只使用Dialog。 ( Doc )

然后就可以像PrimeNg Steps一样显示子路由的内容了。 ( More about child route )

step.module.ts

const routes: Routes = [{
  path: '', component: StepLandingComponent, children: [
    {path: '', redirectTo: 'personal', pathMatch: 'full'},
    {path: 'personal', component: PersonalDemo},
    {path: 'confirmation', component: ConfirmationDemo},
    {path: 'seat', component: SeatDemo},
    {path: 'payment', component: PaymentDemo}
  ]
}];

@NgModule({
  declarations: [StepLandingComponent],
  imports: [
    ...
    StepsModule,
    RouterModule.forChild(routes)
  ],
  providers: [
    TicketService
  ],
  exports: [RouterModule]
})
export class StepModule {
}

step-landing.component.ts

export class StepLandingComponent {

  display: boolean;
  items: MenuItem[] = [
    {label: 'Personal', routerLink: 'personal'},
    {label: 'Seat', routerLink: 'seat'},
    {label: 'Payment', routerLink: 'payment'},
    {label: 'Confirmation', routerLink: 'confirmation'}
  ];

  constructor() { }

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

step-landing.component.html

<button type="button" (click)="show()" pButton icon="pi pi-info-circle" label="Show"></button>
<p-dialog position="top" [(visible)]="display">
  <div class="card">
    <p-steps [model]="items" [readonly]="false"></p-steps>
    <router-outlet></router-outlet>
  </div>
</p-dialog>