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

我对Angular来说很新。我的应用程序有多个“页面（组件）”，它们共享相同的内容 - 页眉，页面的总体布局等。它们可以共享css和html（而不是在每个组件中重复），但是我不知道该怎么去做。这基本上是我想要做的：如何在两个子Angular2组件之间共享父HTML？

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

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

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

来源

2017-03-17 William Curry

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

Angular是一个“Single Page Application”框架。例如你，如果你有一个登录页面，你的代码可能是这个样子：

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

则当角用户登录删除login-component并用profile-component

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

这种方式将其替换你只有1页，你可以根据需要换出组件。我建议遵循一个角度（2？）教程，这将解释如何实现这一目标。

来源

2017-03-17 03:26:42

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

来源

2017-03-17 02:15:38 Saravanan

希望这样的结构才有意义

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

parentPage - 可以让你的共同布局

容器 - 可以让你的孩子的组件，你可以选择正确的子组件（这是在容器内进行组件的各自的HTML文件，你可以使用* ngIf来选择你想渲染哪个子组件）

来源

2017-03-17 03:42:12 Nugu

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

回答

相关问题