1

angular cli で AOT を使用すると、テンプレート タグを使用してコンテンツを渡すたびに、コンポーネントの 1 つでこの奇妙なちらつきが発生します。

成分：

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>

ここで何が起こっているか知っている人はいますか？残念ながらそれに関する情報は見つかりませんでした。

4

0 に答える 0