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

Angular2组件:: ViewChild / ContentChild类

1 个答案: