[英]Angular 6 router-outlet styling applied to element below it
I'm in a phase of adding router transitions to the angular application and I'm facing weird problem.我正处于将路由器转换添加到 angular 应用程序的阶段,但我面临着奇怪的问题。 Styling for router-outlet
gets applied to the element below it in the DOM hierarchy. router-outlet
样式被应用于 DOM 层次结构中它下面的元素。
Here's my code:这是我的代码:
<main role="main">
<!-- Header -->
<app-header class="topnavbar-wrapper"></app-header>
<!-- Page content-->
<div [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</div>
<!-- Footer -->
<app-footer></app-footer>
</main>
Styling:造型:
main {
box-sizing: border-box;
margin-top: 4.5rem;
min-height: 92vh;
padding-bottom: 4rem;
/* Height of footer */
position: relative;
}
router-outlet ~ * {
position: absolute;
height: 100%;
width: 100%;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
color: #fff;
background-color: $secondary;
}
Animations work smoothly, I have no problem with that.动画工作顺利,我没有问题。 But the router-outlet styling is applied to element below it and this makes footer fixed at the bottom, overlaying the content.但是路由器插座样式应用于它下面的元素,这使得页脚固定在底部,覆盖内容。 If I clear styling of router-outlet element then animation won't work correctly.如果我清除了路由器插座元素的样式,则动画将无法正常工作。
As you can see on the screen <app-overview>
element has router-outlet
styling which is what causes the problem.正如您在屏幕上看到的那样, <app-overview>
元素具有router-outlet
样式,这就是导致问题的原因。 I guess that solution lies in correct scss styling but so far I wasn't able to figure it out.我想该解决方案在于正确的scss样式,但到目前为止我无法弄清楚。
The selector router-outlet ~ *
selects all of the router-outlet
siblings, that's why it applies on app-overview
.选择器router-outlet ~ *
选择所有router-outlet
兄弟,这就是它适用于app-overview
。
Also you shouldn't try to style a router-outlet
since it is not rendered (it's just a placeholder)此外,您不应该尝试设置router-outlet
样式,因为它没有被渲染(它只是一个占位符)
I was working on an Ionic Project which primarily uses Angular, I wanted to style router outlet to follow my CSS grids applied, ion-router-outlet
didn't work out, so I used router-outlet
and it worked fine.我正在开发一个主要使用 Angular 的 Ionic 项目,我想设置路由器插座的样式以跟随我应用的 CSS 网格,但ion-router-outlet
没有工作,所以我使用了router-outlet
,它工作正常。 Related to the question but not that specific, might help someone out there.与问题相关但不是那么具体,可能会帮助那里的人。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.