在 angular2 中，我可以查询内容子项的存在，以便根据它们的存在或缺失来修改我的模板吗？

Question

假设我有一个可以称为

的自定义组件

<c-component>
  <c-title>title text</c-title>
  <c-help>help text</c-help>
</c-component>

或只是 <c-component></c-component> 或与 either/only 的子组件。如果没有子组件，我想为 c-component 提供一个完全不同的界面。如果有……有没有办法可以在不插入子内容元素的情况下查询子内容元素的存在？例如在 c-content 的模板中

<element if="c-help componenet exists">
  <various elements and stuff that can't go in the c-help directive/>
  <ng-content selector="c-help"></ng-content>
</element>
<element if="c-title component exists">
  <various elements and stuff that can't go in the c-help directive/>
  <ng-content selector="c-title"></ng-content>
</element>
<element if="c-title and c-help component don't exist">
  <various elements and stuff that can't go in the c-help directive/>
  <ng-content></ng-content>
</element>

Answer 1

@ContentChild() 可用于此：

@Comonent({
  ...
  template: `
  <div *ngIf="viewMode == 'simple'>
   <div>simple ui></div>
  </div>
  <div *ngIf="viewMode == 'advanced'>
   <div>advanced ui></div>
  </div>
`
})
class MyComponent {
  viewMode:string;
  @ContentChild(CTitle) cTitle:CTitle;

  ngAfterViewInit() {
   this.viewMode = this.cTitle ? 'simple' : 'advanced';
  }
}

在 angular2 中，我可以查询内容子项的存在，以便根据它们的存在或缺失来修改我的模板吗？

In angular2 can I query the existence of content children in order to modify my template based on their existence or lack?

angular2-template

angular