BS4 类 在 HTML 组件重构上中断 Angular

Question

我目前正在 Angular 中构建组件，但我希望将某个部分重构为一个组件，因为这将在其他组件中重复使用。当只有 bootstrap 4 类 的 html 块放置在父组件中时， UI 正确显示。

但是，当我将其重构为另一个组件时，UI 中断，尽管仅附加了 bootstrap 4 类。

我尝试了不同版本的 ViewEncapsulation，但都无济于事。我确实检查了 Chrome 的开发人员工具，但尽管设置了 ViewEncapsulation.None，组件选择器上仍然有一些 类 类型的附加项。

我不确定我错过了什么，但我的想法是因为正在使用的 类 只是内置的 bootstrap 4 类，我想知道为什么 UI休息。

Answer 1

继续我上面的评论，kindly check this stackblitz；

• 第一个表格是根据您的第一个屏幕截图
• 第二张表格是根据你的第二张截图 - 你问题中的主要问题......这是因为你粘贴了与表格 #1[=21] 相同的 class col-[xx]-4 =]
• 第三种形式是我提出的解决方案...因为技能现在是一个单独的组件，我们应该把 col-[xx]-12 作为里面的 class

希望对您有所帮助，否则您可以分叉 stackblitz 并在评论中分享您的回复。