Question

我对Angular很新。我的应用程序有多个“页面（组件）”，它们共享共同的东西 - 标题，页面的总体布局等。它们可以共享css和html（而不是在每个组件中重复），但我是不确定如何去做。这基本上就是我想做的事情：

<parentPage>
  <childPage1></childPage1>
</parentPage>

<parentPage>
  <otherChildPage></otherChildPage>
</parentPage>

有人能指出我正确的方向吗？ “childPage1”和“otherChildPage”组件完全不同。一个有一堆链接，另一个是带有一些图像的格式化文本墙。但是这些组件之外的页面整体布局在两者之间完全相同。

Answer 1

您的期望基本上是SPA网站。如果您的应用程序将具有常见的UI查找， sol 1：在index index.html和root组件以及子组件后面进行主查询 sol 2：将您的共同共享html作为父组件，然后将您的孩子作为2个小组件。总共有3个组件。 sol 3：这种方法可以通过UI-Routing轻松实现 - 从谷歌阅读和理解。

Answer 2

Angular是一个“单一页面应用程序”框架。例如，如果您有一个登录页面，您的代码可能如下所示：

<html>
  <body>
    <header-component/>
    <login-component/>
  </body>
</html>

然后，当用户登录角度时，移除login-component并将其替换为profile-component

<html>
  <body>
    <header-component/>
    <profile-component/>
  </body>
</html>

这样您只有1页，您可以根据需要更换组件。我建议遵循一个角度（2？）教程，它将解释如何实现这一目标。

Answer 3

希望这种结构有意义

<parentPage>
  <container>
      <childPage1></childPage1>
      <otherChildPage></otherChildPage>
  </container>
</parentPage>

parentPage - 可以有你的共同布局

容器 - 可以让您的子组件可以选择正确的子组件（这可以在容器组件的相应html文件中完成，您可以使用* ngIf来选择要呈现的子组件）< / p>

如何在两个子Angular2组件之间共享父HTML？

3 个答案: