Angular 2 路由

Question

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

<router-outlet></router-outlet>

as router-outlet 只需替换该路由的组件。那么获得这个的最好方法是什么。我进行了很多搜索，但发现了一个在每个组件中都调用 header/footer 的可悲解决方案。

谢谢

Answer 1

答案取决于您的要求：如果您的 header/footer 是静态的但应用程序的某些部分有所不同，您可以将嵌套路由与组件路由器一起使用。父路由决定 header/footer 布局，子路由决定实际内容。

如果涉及更多逻辑，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)

Angular 2 路由

Angular 2 Routing

angular-routing

angular