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指令看到这个变化，并清除templateю

准备使用数据模板

tabsContext: any; 

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

Stackblitz Example

也见类似的案件

• TemplateRef items being destroyed every time their collection changes