如何在Angular中创建含多内容占位符的可复用容器组件？

当然可以多次使用ng-content啦！这正是Angular实现**内容投影（Content Projection）**多插槽的标准方式，刚好能满足你这个主内容+菜单区的复用容器需求，我给你一步步讲清楚怎么做：

1. 编写WindowComponent的模板与样式 #

首先在你的window.component.html里，给每个需要占位的区域添加带select属性的ng-content，通过这个属性来区分不同的插槽：

<!-- window.component.html -->
<div class="window">
  <h4>Window title</h4>
  <!-- 菜单区专属插槽 -->
  <div class="window-menu">
    <ng-content select="[menu]"></ng-content>
  </div>
  <!-- 主内容区专属插槽 -->
  <div class="window-content">
    <ng-content select="[main]"></ng-content>
  </div>
</div>

再给组件加一些基础样式让布局更清晰：

/* window.component.css */
.window {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  max-width: 800px;
  margin: 20px auto;
}
.window-menu {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.window-content {
  min-height: 200px;
}

2. 在父组件中使用这个复用容器 #

当你需要在其他组件里使用app-window时，只需要给要插入的内容加上对应的属性（和ng-content的select值对应），就能把内容精准放到对应的插槽里：

<!-- 父组件模板，比如parent.component.html -->
<app-window>
  <!-- 插入到菜单区的内容 -->
  <div menu>
    <button>刷新页面</button>
    <button>打开设置</button>
    <app-menu-item></app-menu-item> <!-- 也可以插入自定义组件 -->
  </div>
  <!-- 插入到主内容区的内容 -->
  <div main>
    <h5>欢迎使用</h5>
    <p>这里可以放任何你需要的内容，不管是原生HTML还是自定义组件！</p>
    <app-dashboard-widget></app-dashboard-widget>
  </div>
</app-window>

3. 额外小提示 #

• select属性支持多种选择器：除了上面用的属性选择器（[menu]），还可以用类选择器（.menu-content）、标签选择器（nav），甚至组合选择器，灵活度很高。
• 如果有一个不带select的ng-content，它会匹配所有没被其他插槽选中的内容，不过咱们这个场景明确区分两个插槽，所以用不到这个特性。
• 这种方式完全支持动态插入未知组件，完美适配你“开发时不确定要放什么内容”的需求。

内容的提问来源于stack exchange，提问作者amedina