Angular 2路由

Question

我是angular2的新手。我想完成一项任务，其中我在不同的页面上有不同的页眉和页脚，但不知道如何使用

<router-outlet></router-outlet>

as router-outlet 只需替换该路由的组件即可。那么获得这个的最佳方法是什么。我搜索了很多，但发现了一个可疑的解决方案，在每个组件中调用页眉/页脚。

由于

Answer 1

答案取决于您的要求：如果页眉/页脚是静态的，但对于应用程序的某些部分不同，则可以使用嵌套路由与组件路由器。父路由确定页眉/页脚布局，子路径确定实际内容。

如果涉及更多逻辑，f.e。您需要以更动态的方式确定内容，您可以为页眉和页脚创建使用服务确定内容的特殊组件。 （例如，当您的用户登录而不是匿名访问时。）

Answer 2

完成任务非常简单。不要在您使用最顶级路由器插件的HTML文件中添加任何内容。现在，您将在父路由器插座中加载的每个页面将覆盖整个页面，以便您可以根据您的要求设计每个视图。

如果有人需要在整个应用程序中使用通用内容，请将这些常用元素放在包含最顶层路由器插座的同一文件中。

Answer 3

在这种情况下，不要将页眉和页脚保留在父视图中。查看并将其称为家。在此视图和一个路由器插座中保留页脚和标题，并仅加载此中的所有组件。 制作另一个视图并将其命名为登录并根据您在顶级父视图上的要求加载

--APP(main)
  |--MAIN (parent container)
        |--HOME (will contain all view)
              |--CHILD (parent will be home)
        |--LOGIN (Parent Will be main)