时间戳

首页 > 解决方案 > Angular：在 ng-zorro 模态中路由

angular - Angular：在 ng-zorro 模态中路由

问题描述

我有一个 Angular 项目，我在其中创建了一些可供重用的组件，它们将使用NzModalService.create(). 例如，

// welcome.component.ts
export class WelcomeComponent {
  constructor(private modal: NzModalService) {}

  foo() {
    this.modal.create({
      nzTitle: 'This is a modal',
      nzContent: SharedComponent
    });
  }
}

whereWelcomeComponent是我的主要页面之一，并SharedComponent用作创建的模式的内容。每个组件都有自己的模块和路由模块。

现在我想在上面的模式中制作一些步骤指南，并使用路由在步骤之间导航。为此，我编写了这样的代码：

step-guide.component.html

<ul nz-menu nzMode="horizontal">
  <li nz-menu-item>
    <a [routerlink]="'step1'">Step 1</a>
  </li>
  <li nz-menu-item>
    <a [routerlink]="[{outlets: {stepGuide: ['step2']}}]">Step 2</a>
  </li>
</ul>
<div>
  <router-outlet name='stepGuide'></router-outlet>
</div>

step-guide-routing.module.ts

// imports omitted...

const routes: Routes = [
  { path: 'step1', loadChildren: () => import('../step1/step1.module').then(m => m.Step1Module) },
  { path: 'step2', outlet: 'stepGuide', loadChildren: () => import('../step2/step2.module').then(m => m.Step2Module) }
];

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

我尝试了不同的方法来使其工作，但从未成功。对于上面的代码组合，当我单击第 1 步时，模式消失了，主窗口被引导到一个空白页面。当我单击第 2 步时，什么也没有发生，控制台也没有输出任何错误。从中删除名称<router-outlet>会产生相同的结果。

我还尝试用父路径（例如{path: 'welcome', children: ...}）包装我的路由路径，因为可以通过单击路径为 的组件中的按钮来创建app-routing.module模式/welcome。这会导致错误，例如welcome/step1不匹配任何路线。

实际的问题是，模态在 HTML 中不是硬编码的，可以在不同的组件中创建，所以我不能将它绑定到特定的路径（这也不起作用。）但我希望我的路由可以工作在模态的任何地方创建它。我应该怎么办？

任何想法，将不胜感激。

标签： angularmodal-dialogangular-routingng-zorro-antd

解决方案

推荐阅读