如何在Angular中创建包含两个或多个内容占位符的容器组件？

Question

我必须开发一个类似于这个的可重用组件：

它有两个容器部件，可以容纳当时未知的其他组件，主要内容部分和菜单部分：

在谷歌上搜索，我发现example使用了ng-content指令，但我不知道它是否可以被使用多次（它是＆＃39}我第一次使用Angular进行项目）。这就是这个想法：

<!-- WindowComponent -->
<div class="window">
    <h4>Window title</h4>
    <ng-content></ng-content>
</div>

<!-- Content -->
<div class="content">
    <app-window>
        <div>Some content</div>
    </app-window>

    <!-- How about the menu? -->
</div>

Answer 1

您可以使用<ng-content>和select。像这样：

import { Component } from '@angular/core';

@Component({
  selector: 'transclude',
  template: `

  <header>
    <ng-content select=".header"></ng-content>
  </header>

  <main>
    <ng-content select=".main"></ng-content>
  </main>

  <footer>
   <ng-content select=".footer"></ng-content>
  </footer>

  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class TranscludeComponent  {
}

用法：

<transclude>
  <div class="header">Header</div>
  <div class="main">Main</div>
  <div class="footer">Footer</div>
</transclude>

Live demo

<ng-content select="...">支持选择：

• css班级<ng-content select=".my-css-class">
• ng指令<ng-content select="[my-directive]">
• ng component <ng-content select="my-component">

Answer 2

是的，您可以在组件中多次使用。 如果需要，您可以将视图分解为少数组件。

• 容器组件

• 菜单组件

• 图表/内容组件

您可以将菜单组件和图形组件放入容器组件的模板中。