angular 2在应用程序相同区域的组件之间共享html和代码

我正在寻找angular2中的模式和功能，以解决angular2中ng include的等效问题，并在应用程序相同区域的组件之间共享代码

用例：我的应用程序将有几个不同的区域，每个区域都有自己的页眉/页脚和行为

应用程序“区域”包括：

• /欢迎–公共内容
• /登录–仍然是公共的，但包括登录， 注销、登记等
• /main–应用程序的主要最终用户部分
• /行政-行政区

像这样的每个区域都包括多个组件和模板

目前，我有一个模板html段和组件代码行为，可以为一个区域中的所有组件手动复制

理想情况下，我希望使用类层次结构或类似的方法来支持这一点，以便为每个段在一个位置编写代码

---

关于如何实现这一点有什么想法吗？

最终，我采用了一种方法，将a组件用于公共行为，并将公共组件嵌入到各个地方。不确定这是否是一个好的做法

以下是一个例子：

假设公共html段及其行为包含在一个名为“公共组件”的组件中

...
@Component({
  selector: 'common-component',
  templateUrl: './common.component.html',
  styleUrls: ['./common.component.css']
})
export class CommonComponent implements OnInit {
...

在各种html模板中，我使用这个公共组件元素。如本例中的my/welcome组件：

...
<!-- welcome header and content go here -->

<!-- Common Component -->
<common-component>Loading...</common-component>

<!-- The rest of the welcome content and footer go here -->
...

。。。
加载。。。
...