Angular: 如何以正确的方式构建组件架构？

Question

我目前正在尝试为 Uni-Project 创建一个 Angular-Webpage。因此，我建立了一个 Webshop-MockUp 和几个不同的页面，例如

但由于我现在正尝试使用 Angular 开发网上商店，所以我不太确定 Angular 的 Component-Concept 的架构是否适合我的需求需要。

只要我现在理解它是这样工作的：您创建了一个包含多个（可重用）组件的页面，这些组件都定义了一个页面的不同区域。

对于开始屏幕的示例，我创建了组件：

然后可以将这 5 个组件添加到 app.components.html 以显示第一页。

但现在我不知道如何创建其他 5 个页面并将它们显示在 app.component。

我听说过在组件之间切换的路由..

但这是否意味着我必须为每个我在创建的这些不同组件中输入的页面创建一个 parent-component？

如果是这样，我应该在 app.component.html 中写入什么，如果我仍然可以在不同的组件之间路由？

我现在脑子里有个大疙瘩，我真的希望你能帮帮我！

提前致谢！

Answer 1

是的 parent 每个页面的组件充当管理器组件来与服务对话，获取数据，并将其传递给哑组件并处理来自 child 组件的事件。让你的 children 哑口无言。这被称为 container-component。

是的学习路由。也可以尽可能延迟加载，但您可以稍后重构它。

<router-outlet></router-outlet> 进入 app.component.html.

可能是

<app-navbar>
    Text to display via ng-content
</app-navbar> <!-- Common to all routes/pages --!>

<router-outlet></router-outlet>

Angular: How to do the Components Architecture the right way?