Question

我坐在那里有点难题。我有一个名为应用的组件。

我还有其他几个组件，例如 page1 ， page2 ， page3 。所有不同的组件，其中包含很多验证和人们需要填写的字段。我想在 Application 组件中依次显示所有这些组件。当您申请新的“贷款”时，您会进入/应用程序路线，并且那里有一个面包屑组件以及所有这些组件 page1 ， page2 ， page3 等。它可能像个人信息，财务信息等。

基本管理用户当前位置（显示哪个页面）的最佳方法是什么。当前在应用程序 html im中，使用开关在显示page1 / page2 / page3之间切换。然后，我使用一个枚举来确定我在单击第1页上的“继续”时所处的位置，该枚举将显示2并将其切换到页面。我有很多不满意的事情，想知道您是否可以通过更好的方法来帮助我？

这是我的应用程序HTML：

<div class="ui-g">
<div class="ui-g-7 ui-md-offset-2">
    <app-application-steps></app-application-steps>
</div>
</div>
<div class="ui-g">
<div class="ui-g-7 ui-md-offset-2" [ngSwitch]="activeStep">
    <div *ngSwitchCase="'getting-started'">
        <app-application-getting-started></app-application-getting-started>
    </div>
    <div *ngSwitchCase="'personal-details'">
        <app-application-personal-details></app-application-personal- 
    details>
    </div>
</div>
</div>

每个页面都是其自身的组件，因为它具有不同的依赖性以及大量的验证和代码。因此可以使其保持清洁。

任何建议或技巧都很好。

谢谢！

Answer 1

使用父级组件并更改子视图（在您的情况下为页面）-父级可以跟踪步骤-这是步进器的工作方式。

可以通过多种方式完成，包括一组条件组件

<mypage1 *ngIf=step===1></mypage1>
<mypage2 *ngIf=step===2></mypage2>
<mypage3 *ngIf=step===3></mypage3>

这只是一种可能性。

Answer 2

@Andtoniossssss感谢您的回答，这让我开始思考这个问题，最终我使用了子路线。因此，每个页面都是申请的子途径。因此，您可以只通过路由器来管理通过应用程序html中的路由器出口显示的内容。

在这里我创建子路线：

{path: 'application', component: ApplicationComponent, canActivate [AuthGuardService],
runGuardsAndResolvers: 'always', children: [
     { path: 'getting-started', component: ApplicationGettingStartedComponent },
     { path: 'personal-details', component: ApplicationPersonalDetailsComponent }]

然后在应用程序html模板中仅显示一个路由。

谢谢大家。

在一个组件中运行多个组件

2 个答案: