如何在两个子 Angular2 组件之间共享父 HTML？
Posted
技术标签:
【中文标题】如何在两个子 Angular2 组件之间共享父 HTML？【英文标题】：How to share parent HTML between two child Angular2 components? 【发布时间】：2017-08-08 10:23:10 【问题描述】：总的来说，我对 Angular 还是很陌生。我的应用程序有多个“页面（组件）”，它们都共享共同的东西——标题、页面的总体布局等。它们可以共享 css 和 html（而不是在每个组件中重复），但我不知道该怎么做。这基本上是我想做的：
<parentPage>
<childPage1></childPage1>
</parentPage>
<parentPage>
<otherChildPage></otherChildPage>
</parentPage>
谁能指出我正确的方向？ “childPage1”和“otherChildPage”组件完全不同。一个有一堆链接，另一个是带有一些图像的格式化文本墙。但是这些组件之外的页面整体布局在两者之间是完全一样的。
【问题讨论】：
我想我可以将一个样式表导入到每个组件中。但这并不能解决共享 html 问题。 【参考方案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 来选择要呈现的子组件）
【讨论】：
以上是关于如何在两个子 Angular2 组件之间共享父 HTML？的主要内容，如果未能解决你的问题，请参考以下文章
如果组件不是Angular2中的父子组件，如何在组件之间传递数据？