如何在 ng-container 中使用 ngIfThen

Question

我正在構建一個簡單的石頭剪刀布應用程序。 當我點擊一個按鈕（石頭/紙/剪刀）時，它會說：“你選了……”。 之后它應該隱藏其他2個按鈕。

我想選擇隱藏整個 ng-container 的選項。 單擊其中一個按鈕后，有沒有辦法隱藏 ng-container？ 那么將它添加到 *ngIfThen 語句中？

<div *ngIf="hand==='rock' then rockTemplate"></div>
<div *ngIf="hand==='paper' then paperTemplate"></div>
<div *ngIf="hand==='scissors' then scissorTemplate"></div>
<ng-template #rockTemplate>
  You picked: <app-rock></app-rock>
</ng-template>
<ng-template #paperTemplate>
  You picked: <app-paper></app-paper>
</ng-template>
<ng-template #scissorTemplate>
  You picked: <app-scissors></app-scissors>
</ng-template>


<ng-container #hideContainer class="board">
  <app-rock (click)="pickHand('rock')"></app-rock>
  <app-paper (click)="pickHand('paper')"></app-paper>
  <app-scissors (click)="pickHand('scissors')"></app-scissors>
</ng-container>

Answer 1

我認為您可以使用ng-switch進行簡化：

<div [ngSwitch]="hand">
  <div *ngSwitchCase="rock">You picked: <app-rock></app-rock></div>
  <div *ngSwitchCase="paper">You picked: <app-paper></app-paper></div>
  <div *ngSwitchCase="scissors">You picked: <app-scissors></app-scissors> 
</div>
<ng-container *ngIf="!hasSelection" class="board">
  <app-rock (click)="pickHand('rock')"></app-rock>
  <app-paper (click)="pickHand('paper')"></app-paper>
  <app-scissors (click)="pickHand('scissors')"></app-scissors>
</ng-container>


// In your component class
hasSelection: boolean;
hand: 'rock' | 'scissors' | 'paper';

// ...
pickHand(type: 'rock' | 'scissors' | 'paper') {
  this.hasSelection = true;
  this.hand = type;
}

使用ng-switch您的模板看起來更清晰、更易於閱讀。 您可以通過布爾變量顯示/隱藏ng-container ，一旦用戶選擇一種手型，該變量就會切換。

我不知道你的邏輯，但你必須重新啟用ng-container ，如果用戶有可能再次選擇一手牌。