ngTemplateOutlet阻止指令正常工作 [英] ngTemplateOutlet prevents directive from working correctly

问题描述

我正在构建一个tabs组件，并在其标题中添加了一个涟漪组件，该组件附加了一个类并执行动画，如下面的代码所示.

I am building a tabs component and in its headers i added a ripple component that attaches a class and does the animation as seen in code below.

但是，即使它在我的所有其他组件中都能工作，即按钮在ngTemplateOutlet上下文中使用时似乎无法工作.也许我做错了.欢迎任何提示.

However even though it works in all my other components i.e buttons seems that it fails to work when used inside an ngTemplateOutlet context. Perhaps i am doing something wrong. Any tips welcome.

tabsComponentTemplate

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);
    }
  }

推荐答案

主要原因是每次检测到更改时都会重新渲染列表，因为每次都将新对象传递给context:

The main reason for this is that your list is rerendered every time change detection happens because you're passing new object to context every time:

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

NgTemplateOutlet指令可以看到此更改并清除templateю

NgTemplateOutlet directive sees this changes and clears templateю

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

Use prepared data for template

tabsContext: any;

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

Stackblitz示例

Stackblitz Example

另请参阅类似情况

• TemplateRef项每次更改集合都会被破坏

这篇关于ngTemplateOutlet阻止指令正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！