每当我将 AOT 与 angular cli 一起使用时,每当我使用模板标签将内容传递给它时,我的一个组件上就会出现这种奇怪的闪烁。
零件:
export class SelectComponent implements ControlValueAccessor, OnDestroy, OnInit {
@ContentChild(TemplateRef) templateRef: TemplateRef<any>;
/ .... /
}
组件模板:
<div #select>
<ul>
<li>
<div #toggler (tap)="toggle()">
<span #selected>
<template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: model}"></template>
</span>
</div>
<ul>
<li *ngFor="let option of options" (tap)="selectOption(option)">
<span #optionContent>
<template [ngTemplateOutlet]="templateRef" [ngOutletContext]="{$implicit: option}"></template>
</span>
</li>
</ul>
</li>
</ul>
</div>
用法:
<custom-select [(ngModel)]="currentVariant" [options]="options">
<template let-option>
<span *ngFor="let text of [option?.engine?.name, option?.supplements, option?.engine?.fuelType?.name, option?.engine?.horsepowers ? option?.engine?.horsepowers + 'hk' : option?.engine?.horsepowers]">{{text}}</span>
</template>
<template let-model>
<span *ngFor="let text of [model?.engine?.name, model?.supplements, model?.engine?.fuelType?.name, model?.engine?.horsepowers ? model?.engine?.horsepowers + 'hk' : model?.engine?.horsepowers]">{{text}}</span>
</template>
</custom-select>
有谁知道这里发生了什么?不幸的是,找不到任何关于它的信息。