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