在 HTML 中注入 Selector 后，如何在 Angular 中纠正 CSS 样式？

【问题标题】：How to rectify CSS styling in Angular after injecting Selector in your HTML?在 HTML 中注入 Selector 后，如何在 Angular 中纠正 CSS 样式？
【发布时间】：2021-08-20 07:03:05
【问题描述】：

我试图将重复的代码分解成组件，只是为了使代码干净。但是当我将一大段代码转换成一个组件并在代码中使用它的选择器时，样式就中断了。

所以基本上，这就是我现在得到的：

这就是我想要得到的：

如您所见，主要内容向下移动。尽管如此，我还是将选择器放在了之前代码所在的位置。如何防止这种情况发生？

StackBlitz 链接：https://stackblitz.com/edit/angular-ivy-mk3swj?file=src/app/app.component.html

【问题讨论】：

标签： angular bootstrap-5

【解决方案1】：

请试试这个

   <div class="feature style">
     <div class="row">
       <app-nav-menu class="col-md-3 col-lg-3"></app-nav-menu>
       <div class="col-md-9 col-lg-9">
         <div class="row rs-counter resource">
             ...
         </div>
       </div>
     </div>
   </div>

【讨论】：

虽然内容确实向左移动了。右侧的导航会缩小并呈现块状，而不是屏幕截图中的矩形。
您可以在app-nav-menu 上使用col-md-4，在div 上使用col-md-8。尝试调整这些。
我找到了解决方案。我从nav 标签中删除了class="col-md-3 col-lg-3 d-md-block sidebar" 类。并将其应用于自定义选择器<app-nav-menu>。
是的，但我在代码中没有看到任何sidebar css 类。我认为。最好保持这样class="col-md-3 col-lg-3。你可以避免不必要的代码。