Question

鉴于以下示例，是否有办法（通过代码，而不是文档）与“卡”消费者进行沟通。一个＆＃39; card-header＆＃39;，content和＆＃39; card-footer＆＃39;应该包括在内吗？

示例组件：

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>

Answer 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>元素的提示，而这些元素不会传递与其选择器匹配的子项。

Answer 2

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

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父级中的投影内容，请在父级中实现类似的逻辑。

Angular 2 Transclusion / ng-content，传达依赖关系

2 个答案: