Angular 7+：在没有容器 HTML 元素的情况下渲染组件（弄乱了引导程序样式）

Posted 2023-03-13

【中文标题】Angular 7+：在没有容器 HTML 元素的情况下渲染组件（弄乱了引导程序样式）

【英文标题】：Angular 7+: Render Component Without Container HTML Element (Messes up Bootstrap Styling)

【发布时间】：2020-06-30 02:25:51

【问题描述】：

我认为我遇到的问题非常简单。 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>

注意：我不能将col div 移到组件外，也不能将row 移到组件内。这些行属于父组件（并且差异很大/等等），而列属于子组件实例。

呈现时生成的 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 组件是不可能的，我愿意接受建议！）

我宁愿不插入 hacky 样式来违背 Bootstrap 的传统样式，或者删除子组件（我重复使用它们并在 HTML 中重复它们的代码会很痛苦）。

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

【问题讨论】：

您是否尝试将行类添加到 mycomponent？

@JohnPeters 它不属于我的组件。我将进行编辑以澄清，出于我的目的，将row 移动到子组件内或将col 移动到子组件外是没有意义的。不过感谢您的回复！

自定义组件 css 中的另一条注释，您可以使用 :root。样式的伪选择器

【参考方案1】：

我确实找到了一种在不牺牲父/子组件分离的情况下保留 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（和其他逻辑）正确地保留在子组件之外，同时也让我将放在子组件中的内容保留在内部。

据我所知，Angular 标签默认显示inline（而不是block 用于<div> 标签）。当然，应用 row 类会将其更改为 flex，就像应用于其他容器标签时一样，而且它的行为似乎就像 <div class="row"> 一样（一件好事）。

对于任何寻找“我需要直接的 CSS 层次结构才能使布局工作”的人，这应该可以帮助您。