ngTemplateOutlet阻止指令正确工作。

Question

我正在构建一个制表符组件，并在其标题中添加了一个附加类并执行动画的纹章组件，如下面的代码所示。

然而，尽管它在我的所有其他组件(即按钮)中都能工作，但当在ngTemplateOutlet上下文中使用时，它似乎无法工作。也许我做错了什么。任何小费都欢迎。

tabsComponentTemplate

<div class="nui-tab-group">
  <ng-template #defaultTabsHeader let-tabs="tabs">
    <ul class="nui-tab-group-buttons" *ngIf="tabs">
      <li class="tab-button"
          [ngClass]="{selected: tab.selected}"
          (click)="selectedTab(tab)"
          ripple-c
          *ngFor="let tab of tabs">{{ tab.title }}
      </li>
    </ul>
  </ng-template>

  <ng-container *ngTemplateOutlet="headerTemplate || defaultTabsHeader; context: tabsContext"></ng-container>

  <ng-content></ng-content>
</div>

波纹元件主部件

@HostListener('click', ['$event', '$event.currentTarget'])
  click(event, element) {
    if (this.rippleStyle === 'expand') {
      let ripple = document.createElement('span'),
        rect = element.getBoundingClientRect(),
        radius = Math.max(rect.height, rect.width),
        left = event.pageX - rect.left - radius / 2 - document.body.scrollLeft,
        top = event.pageY - rect.top - radius / 2 - document.body.scrollTop;

      ripple.className = 'expand-ripple-effect animate';
      ripple.style.width = ripple.style.height = radius + 'px';
      ripple.style.left = left + 'px';
      ripple.style.top = top + 'px';
      ripple.addEventListener('animationend', () => {
        element.removeChild(ripple);
      });
      element.appendChild(ripple);
    }
  }

Answer 1

造成这种情况的主要原因是，每次发生更改检测时，您的列表都会被重新命名，因为每次都要将新对象传递给context：

get tabsContext() {
  return {
    tabs: this.tabs
  }
}

NgTemplateOutlet指令可以看到这些更改，并清除模板ю。

使用准备好的数据作为模板

tabsContext: any;

ngAfterContentInit (): void {  
  ...  
  this.tabsContext = {
    tabs: this.tabs
  }
}

Stackblitz示例

另见类似案例

• 每次TemplateRef项的集合更改时都会被销毁