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

【问题标题】：How to share parent HTML between two child Angular2 components?如何在两个子 Angular2 组件之间共享父 HTML？
【发布时间】：2017-08-08 10:23:10
【问题描述】：

总的来说，我对 Angular 还是很陌生。我的应用程序有多个“页面（组件）”，它们都共享共同的东西——标题、页面的总体布局等。它们可以共享 css 和 html（而不是在每个组件中重复），但我不知道该怎么做。这基本上是我想做的：

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

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

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

【问题讨论】：

我想我可以将一个样式表导入到每个组件中。但这并不能解决共享 html 问题。

标签： angular typescript nested components

【解决方案1】：

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

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

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

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

这样您就只有 1 页，并且可以根据需要更换组件。我建议遵循 angular(2?) 教程，该教程将解释如何实现这一点。

【讨论】：

【解决方案2】：

您所期望的基本上是一个 SPA 网站。如果您的应用程序要进行通用 UI 查找， sol 1：在根 index.html 和根组件和子组件跟进您的主要查找 sol 2：将您的公共共享 html 作为父组件，然后将您的孩子作为 2 个小组件。所以总共你有3个组件。 sol 3：这种方法可以通过 UI-Routing 轻松实现 - 从 google 阅读和理解。

【讨论】：

【解决方案3】：

希望这个结构有意义

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

parentPage - 可以有你的共同布局

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

【讨论】：