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

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

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

通过谷歌搜索，我发现了一个使用ng内容指令的应用程序，但我不知道它是否可以被多次使用。这是我第一次在项目中使用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>

---

是的，您可以在一个组件中使用多次。 如果需要，可以将视图拆分为几个组件

容器组件

菜单组件

图形/内容组件

---

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

是的，您可以在一个组件中使用多次。 如果需要，可以将视图拆分为几个组件

容器组件

菜单组件

图形/内容组件

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

您可以使用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>

支持通过以下方式进行选择：

css类 ng指令 ng组分 您可以与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>

支持通过以下方式进行选择：

css类 ng指令 ng组分