Angular组件引入后布局异常：文档区块无法与文章区块并列

Angular组件会自动生成一个宿主元素（比如<app-document-upload>），这个元素会插在row和内部的col-lg-5之间，破坏了Bootstrap栅格的层级结构——Bootstrap要求col必须是row的直接子元素，中间多了一层宿主元素后，栅格的浮动/弹性布局规则就不生效了，导致区块换行。

有两种常用的处理方式：

• 方式1：使用属性选择器定义组件
  修改组件的@Component装饰器，把选择器改成属性形式，避免生成额外的宿主元素：

  @Component({
    selector: '[app-document-upload]',
    templateUrl: './document-upload.component.html',
    styleUrls: ['./document-upload.component.css']
  })
  

  父组件中直接把属性加到col元素上：

  <div class="row">
    <div class="col-lg-7">文章区块内容</div>
    <div class="col-lg-5" app-document-upload></div>
  </div>
  

• 方式2：让宿主元素继承col类
  在组件的宿主元素上添加col-lg-5类，同时移除组件内部的col-lg-5：
  组件装饰器中配置宿主类：

  @Component({
    selector: 'app-document-upload',
    templateUrl: './document-upload.component.html',
    styleUrls: ['./document-upload.component.css'],
    host: {
      'class': 'col-lg-5'
    }
  })
  

  组件内部HTML仅保留核心内容：

  <div>文档上传相关内容</div>
  

  父组件中直接引入组件：

  <div class="row">
    <div class="col-lg-7">文章区块内容</div>
    <app-document-upload></app-document-upload>
  </div>
  

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