Angular如何将两个*ngIf显隐逻辑改写为标准*ngIf else结构

你当前用[style.visibility]控制显隐的方案天然存在布局缺陷：visibility: hidden仅会让元素视觉上不可见，但元素仍然会在文档流中占据原有空间，因此两个div即使一隐一显也会同时占位，无法出现在同一位置。

Angular的*ngIf else语法不需要把大段模板内容写在指令属性里，而是通过<ng-template>标签承载else分支的独立模板块，写法清晰且不会破坏原有模板结构，改完的代码如下：

<!-- 条件为真时渲染的主分支块 -->
<div 
  class="col-sm-12 col-md-4" 
  *ngIf="showLanguageControl; else faxInputTpl"
>
  <label class="col-sm-3 col-md-5" for="providerRoute">Linked Language Letter</label>
  <div class="col-sm-5 col-md-7 padding-adj">
    <input 
      type="text" 
      id="linkedLetter" 
      name="linkedLetter" 
      #linkedLetter 
      formControlName="linkedLetter" 
      [ngClass]="['form-control','input-xs']" 
    />
  </div>
</div>

<!-- else分支模板，通过#xxx模板引用变量和*ngIf指令关联，本身不会被渲染为真实DOM节点 -->
<ng-template #faxInputTpl>
  <div class="col-sm-12 col-md-4">
    <label class="col-sm-3 col-md-5" for="providerRoute">Fax Number</label>
    <div class="col-sm-5 col-md-7 padding-adj">
      <input 
        type="text" 
        id="faxInput" 
        name="faxInput" 
        #faxInput 
        formControlName="faxInput" 
        [ngClass]="['form-control','input-xs']" 
      />
    </div>
  </div>
</ng-template>

• 如果你的业务逻辑不是严格二选一（比如两个开关可能同时为真/同时为假），不需要硬凑else语法，直接给两个块分别加*ngIf判断即可：

<div class="col-sm-12 col-md-4" *ngIf="showLanguageControl">
  <!-- 语言输入框内容保持不变 -->
</div>
<div class="col-sm-12 col-md-4" *ngIf="showFaxNumberInput">
  <!-- 传真输入框内容保持不变 -->
</div>

*ngIf会直接把不符合条件的元素从DOM树中移除，不会保留占位，两个块自然会占据同一布局位置。

• 如果需要保留用户在输入框中已填写的内容、避免切换时表单控件被重新初始化，可以用[hidden]绑定代替*ngIf：

<div class="col-sm-12 col-md-4" [hidden]="!showLanguageControl">
  <!-- 语言输入框内容 -->
</div>
<div class="col-sm-12 col-md-4" [hidden]="!showFaxNumberInput">
  <!-- 传真输入框内容 -->
</div>

[hidden]等价于给元素设置display: none，元素不会在文档流中占位，同时会保留DOM节点和已输入的状态。

内容的提问来源于stack exchange，提问作者Corey Sutton