当我将代码移动到组件中时,样式无法正常工作(Angular 8)

问题描述 投票:0回答:1

我正在尝试将基于Bootstrap的模板转换为Angular。该模板包括一个仪表板页面,在该仪表盘页面上会出现此样式问题。但是,我怀疑这是一个全球性问题,与页面无关。该模板具有一个内容区域和一个侧面导航栏。我将所有主题文件移到了角度,创建了一个HomeComponent,将整个布局从模板复制到了这个HomeComponent中并运行该程序。一切看上去和行为都与原始模板完全相同(我不是指JS行为)。

接下来,我开始将长版布局分解为多个组件。我创建NavPaneComponent并将组件标签放置在其中,如下所示:

<div class="container" data-layout="container">
  <app-nav-pane></app-nav-pane>

注意,此时NavPaneComponent包含与原始模板相同的HTML代码,并且标记<app-nav-pane></app-nav-pane>放置在原始窗格的位置。

尽管我没有在HTML代码中进行任何更改,但样式却变得混乱。以前,中殿窗格在左侧为can be seen here,但现在它是浮动的,如在此图片中可以看到的(请注意,中殿是如何“坐在”其他组件的顶部):enter image description here

我想念什么吗?

html css angular bootstrap-4
1个回答
0
投票

尝试使用封装:ViewEncapsulation.None,在您的@Component中

并从“ @ angular / core”导入{Component,OnInit,ViewEncapsulation};

它将以CSS形式成为主要组成部分

© www.soinside.com 2019 - 2024. All rights reserved.