Angular中<ng-template>组件替换后Bootstrap布局错位求助

问题原因 #

核心问题是Angular的ng-template不会被渲染为实际DOM元素——你给ng-template添加的col-md-7类完全无效。当切换到新建食谱组件时，<app-new-recipe>没有被col-md-7容器包裹，无法和左侧的col-md-5保持在同一行，因此自动换行到列表下方。

修复方案 #

固定右侧的col-md-7容器，在容器内部用*ngIf/else切换组件，确保两个组件都处于同一个列容器中：

修改后的主组件HTML代码：

<div class="row">
  <div class="col-md-5">
    <app-recipe-list></app-recipe-list>           
  </div>

  <div class="col-md-7">
    <!-- 条件渲染：切换详情/新建组件 -->
    <app-recipe-detail *ngIf="this.recipesService.detailsOverNew; else details"></app-recipe-detail>
    <ng-template #details>
      <app-new-recipe></app-new-recipe>
    </ng-template>
  </div> 
</div>

另外，<app-new-recipe>内部的Bootstrap列结构需要规范（列必须放在.row容器中），建议调整组件代码：

<div class="row">
  <div class="col-xs-12">
    <h2> 新建食谱</h2>
    <div class="col-md-5">
      <input class="form-control" #newRecipeName placeholder="名称"> 
      <input class="form-control" #newRecipeDescription placeholder="描述">
      <input class="form-control" #newRecipePicture placeholder="图片链接">
    </div>
  </div>
</div>
<br>
<button class="btn btn-primary">取消</button>

修改后，新建食谱组件会始终处于右侧的col-md-7列中，不会跑到左侧列表下方。

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