Angular 2 Transclusion / ng-content，沟通依赖关系答案

【问题标题】：Angular 2 Transclusion / ng-content, communicate dependenciesAngular 2 Transclusion / ng-content，沟通依赖关系
【发布时间】：2016-12-11 18:52:21
【问题描述】：

鉴于下面的示例，有没有办法（通过代码，而不是文档）与 'card' 组件的消费者沟通，应该包含 'card-header'、content 和 'card-footer'？

示例组件：

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

@Component({
    moduleId: module.id,
    selector: 'card',
    templateUrl: 'card.component.html',
})
export class CardComponent {
}

示例 HTML (card.component.html)：

<div class="card">
  <div class="card-header">
    <ng-content select="card-header"></ng-content>
  </div>

  <ng-content></ng-content>

  <div class="card-footer">
    <ng-content select="card-footer"></ng-content>
  </div>
</div>

【问题讨论】：

标签： angular

【解决方案1】：

您可以查询传递的内容并抛出异常。目前无法在开发时通知用户。

<div class="card">
  <div class="card-header" #header>
    <ng-content select="card-header"></ng-content>
  </div>
  <div #body>    
    <ng-content></ng-content>
  </body>
  <div class="card-footer" #footer>
    <ng-content select="card-footer"></ng-content>
  </div>
</div>

@Component({
    moduleId: module.id,
    selector: 'card',
    templateUrl: 'card.component.html',
})
export class CardComponent {
  @ContentChildren('header') header:ElementRef;
  @ContentChildren('body') body:ElementRef;
  @ContentChildren('footer') header:ElementRef;

  ngAfterContentInit() {
    if(!this.header.toArray().length) {
      throw 'No content was provided that matches ".card-header".';
    }
    if(!this.body.toArray().length) {
      throw 'No body content was provided.';
    }
    if(!this.footer.toArray().length) {
      throw 'No content was provided that matches ".card-footer".';
    }
  }
}

正在进行一些语言服务工作，最终可能会为 <ng-content> 元素提供提示，其中未传递与其选择器匹配的子元素。

【讨论】：

【解决方案2】：

如果我理解正确，您希望有条件地在 CardComponent 中显示投影的 HTML。在这种情况下，您可以使用*ngIf。例如，您可以在 CardComponent 中声明一个布尔变量（或 @Input 参数）：

showFooter: boolean=false;

然后在模板中执行以下操作：

  <div *ngIf="showFooter">
    <ng-content select="card-footer"></ng-content>
  </div>

CardComponent 的父级将在其模板中包含以下内容：

  <card>
    <div class="card-header" ><i>Card got this header from parent</i></div>
    <div class="card-footer"><i>Card got this footer from parent</i></div>
  </card>

如果showFooter 是false，CardComponent 将不会呈现页脚。

如果要控制CardComponent的parent中的投影内容，在parent中实现类似的逻辑。

【讨论】：