如何在Angular 5中安排组件/页面？

Question

我将使用Angular 5开始一个新项目（我在开始这个项目之前已经学了几个月）。 我有以下设计：

让我解释一下： 我们有主菜单（管理员，配置，帐户和报告） 以及每个主菜单的Siderbar。

如果我们点击管理员，左侧的边栏将显示用户，客户，银行和群组。

第一张图片将突出显示管理员＆amp;客户端使用客户端组件/页面。如果我单击Banks，ADMIN仍将突出显示，Banks将突出显示。

但是当我点击[帐户]时，侧栏会被更改为显示交易，客户，列表和帮助页面。 Afaik，我只知道app.component.html中只能有一个模板。 但我需要为不同的页面设置不同的侧边栏。我应该对侧边栏进行硬编码吗？或者这有什么好的规则吗？

1. 如何突出显示管理员＆amp;客户端，如果页面转到客户端页面（我可以有http://myproject.com/admin/clients/list的网址）

谢谢

Answer 1

您可以创建具有动态项目的侧栏组件，并根据所选内容将其作为输入发送并显示它们。选择其中一个时，您将输出一个包含所选项目的事件，并在父组件/容器中处理该事件。

此侧边栏可以放置在应用程序组件中，也可以放置在每个页面中，例如，如果仅在其中一些页面中需要它，而其他页面可能有不同的组件。

要突出显示活动项目，可以使用RouterLinkActive directive或需要更复杂的项目创建一个检查网址的功能，例如：

    isRouteActive(route: string) {
        return this.router.url.includes(route);
    }