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指令会看到此更改并清除templateю

将准备好的数据用于模板

tabsContext: any;

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

<强> Stackblitz Example

参见类似案例

TemplateRef items being destroyed every time their collection changes

ngTemplateOutlet可防止指令正常工作

1 个答案: