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

【问题标题】：Running multiple Components in one component在一个组件中运行多个组件
【发布时间】：2018-08-07 16:01:07
【问题描述】：

我坐在那里有点困惑。我有一个名为 Application 的组件。

我还有其他几个组件，例如 page1、page2、page3。所有不同的组件都有很多验证和人们需要填写的字段。我想在 Application 组件上一个接一个地显示所有这些组件。当你申请新的“贷款”时，你会被带到 /application 路径，我有一个面包屑组件和所有这些组件 page1、page2、page3 等。可能是个人信息、财务信息等。

基本上管理用户当前所在位置（显示哪个页面）的最佳方式是什么。目前在application html中使用一个开关来切换显示page1/page2/page3。然后我使用一个枚举来确定我在哪里，当我在 page1 上单击继续时，枚举会说 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>

每个页面都有自己的组件，因为它具有不同的依赖关系以及大量的验证和代码。所以它保持清洁。

任何建议或提示都会很棒。

谢谢！

【问题讨论】：

标签： angular typescript

【解决方案1】：

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

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

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

这只是一种可能性。

【讨论】：

*ngIf 与 switch 相比有什么优势？性能更好？
我希望你明白这只是一个相同的概念，而不是重复的。
@UnluckyAj 我很好，但是在 2 个答案中重复相同的概念没有意义 - 我看到有 10 分钟的延迟，所以我们没有一起写。无论如何都不要担心。
@MADJAR 有的话可以忽略。
子视图还应该像一个完整的组件吗？

【解决方案2】：

@Andtoniosssss 感谢您的回答，这让我想到了这个问题，我最终使用了子路线。所以每个页面都是应用的子路径。因此，您可以只使用路由器来管理通过应用程序 html 中的 router-outlet 显示的内容。

我在这里创建子路由：

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

然后只是一个在应用程序中的html模板来显示这些路由。

谢谢大家。

【讨论】：