Angular 7+：不包含容器HTML元素的渲染组件（包含Bootstrap样式）

Question

我想，我遇到的直接问题很简单。 Bootstrap需要HTML才能使其网格系统正常工作。这是一个非常简化的一般示例：

<div class="row">
  <div class="col">
    Nicely-formatted!
  </div>
</div>

问题是，如果我将内部零件拉出到单独的Angular组件中，它将添加一个包装容器，该包装容器会脱离Bootstrap的样式并完全弄乱布局：

源HTML：

<div class="row">
  <app-my-component></app-my-component>
</div>

我的组件HTML：

<div class="col">
  Nicely-formatted!
</div>

NOTE：我无法将col div移至组件外部，也无法将row移至组件内部。这些行属于父组件（相差很多/等等），cols属于子组件实例。

渲染时生成的HTML（现在很遗憾，因为它的格式不再正确：）：

<div class="row">
  <app-my-component>
    <div class="col">
      Nicely-formatted!
    </div>
  </app-my-component>
</div>

是否有一种方法可以指示Angular渲染<app-my-component>标签？我希望它直接直接内联HTML，这可以解决我的问题。This similar question received no love, after most comments/answers addressed the wrong thing。帮助解决我们的集体问题！ ：）（如果无法渲染没有wrapper标签的Angular组件，我愿意接受建议！）

[我宁愿不屈从于骇人听闻的样式来违背Bootstrap的常规样式，也不要删除子组件（我会重复使用它们并在HTML中重复它们的代码会很痛苦）。

有关如何重新排列HTML的建议，我们还是经常遇到一个更大的问题：通常能够关闭组件HTML的呈现。

我想，我遇到的直接问题很简单。 Bootstrap需要HTML才能使其网格系统正常工作。这是一个非常简化的一般示例：

]]]]

我确实找到了一种保持Bootstrap布局而不牺牲我的父/子组件分离的方法。我相信这很简单。

[不是将<div>用于row类，而是直接将其放在组件HTML上，否则无需进行任何调整：

<app-my-component class="row"></app-my-component>

最终输出的HTML内容如下（并且内容再次说明了事实：]

<app-my-component class="row">
  <div class="col">
    Nicely-formatted!
  </div>
</app-my-component>

该解决方案归结为“将组件用作Bootstrap的容器类，而不是div标签。”它使我可以将row（和其他逻辑）正确地保留在子组件的外部，同时也可以将放置在子组件内部的内容保留在内部。对于任何寻求“我需要直接CSS层次结构才能工作的布局”的人，这应该可以为您提供帮助。

Answer 1

我确实找到了一种保持Bootstrap布局而不牺牲我的父/子组件分离的方法。我相信这很简单。