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]');
  ...
}