我正在尝试将基于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,但现在它是浮动的,如在此图片中可以看到的(请注意,中殿是如何“坐在”其他组件的顶部):
我想念什么吗?
尝试使用封装:ViewEncapsulation.None,在您的@Component中
并从“ @ angular / core”导入{Component,OnInit,ViewEncapsulation};
它将以CSS形式成为主要组成部分