Angular2 Components :: ViewChild / ContentChild

Question

我正在尝试设计一个可扩展的组件，如下所示：

<collapsable [expanded]="myFlag">
  <div title>Summary</div>
  <div alternate-title>Heading</div>
  <div content>Details</div>
</collapsable>

alternate-title部分应该是可选的。 当myFlag = false ，组件应仅渲染：

<div title>Summary</div>

但是，当myFlag = true ，组件应呈现以下之一：

// If alternate-title exists..
<div alternate-title>Heading</div>
<div content>Details</div>

// If alternate-title does not exist..
<div title>Summary</div>
<div content>Details</div>

现在，我有这个组件的模板定义如下：

<ng-content *ngIf="!expanded" select="[title]"></ng-content>
<ng-content *ngIf="expanded"  select="[alternate-title]"></ng-content>
<ng-content *ngIf="expanded"  select="[content]"></ng-content>

这适用于第一种情况（如果存在alternate-title ）。 但是，在第二种情况下，它显然不起作用（显然）。 为了让它适用于第二个场景，我需要在我的组件中引用alternate-title 。 一种方法是在下面：

// In page.html..
<div #alternateTitle alternate-title>...</div>

// In component.ts
@ContentChild('alternateTitle') alternateTitle: ElementRef;

但是，我不喜欢这种方法，因为它迫使我为alternate-title定义一个冗余的局部变量。

有没有办法可以在我的组件中获得对alternate-title的引用，以检查我的组件的用户是否定义了它？

Answer 1

我们需要一个带有模板变量的包装元素：

<ng-content *ngIf="!expanded" select="[title]"></ng-content>
<span #titleWrapper><ng-content *ngIf="expanded"  select="[alternate-title]"></span></ng-content>
<ng-content *ngIf="expanded"  select="[content]"></ng-content>

然后我们可以使用@ViewChild()查询元素，然后检查它是否包含我们所介入的内容：

@ViewChild('titleWrapper') titleWrapper:ElementRef;

ngAfterContentInit() {
  let title = this.titleWrapper.nativeElement.querySelector('[alternative-title]');
  ...
}