CSS Angular 2：将路由器出口样式化为宽度 < 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40017615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 2: Styling router-outlet to have width < 100%
提问by Koen De Couck
I'm building an Angular 2 app which would have a side nav bar for screens wider than 500, and a bottom nav bar for screens less wide than 500. For now I was trying to assign a 20% width to the side bar, 80% to app content.
我正在构建一个 Angular 2 应用程序，它有一个侧边导航栏用于屏幕宽度大于 500，底部导航栏用于屏幕宽度小于 500。现在我试图为侧边栏分配 20% 的宽度，80 % 到应用程序内容。
The problem that I have is that the router-outlet content (i.e. the actual app) takes up the full width of the page instead of just 80%. It seems to be ignoring any styling I try to give it. Are we not supposed to style router-outlet directly? Or perhaps there is a better way that I'm overlooking?
我遇到的问题是路由器出口内容（即实际应用程序）占据了页面的整个宽度，而不仅仅是 80%。它似乎忽略了我试图给它的任何样式。我们不应该直接设置路由器插座的样式吗？或者也许有更好的方法可以让我忽略？
app.component.ts
app.component.ts
import { Component, HostListener } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div class="container-fluid">
<nav *ngIf="this.window.innerWidth > 500"></nav>
<router-outlet style="width:80%;float:right;"></router-outlet>
<nav *ngIf="this.window.innerWidth < 500"></nav>
`,
styleUrls: ['app/app.component.css']
})
export class AppComponent {
window = [];
ngOnInit(): void {
this.window.innerWidth = window.innerWidth;
}
@HostListener('window:resize', ['$event'])
onResize(event) {
this.window.innerWidth = event.target.innerWidth;
console.log(this.window.innerWidth);
}
}
回答by Stefan Svrkota
Simple solution is to just put <router-outlet>in a styled div:
简单的解决方案是只放入<router-outlet>一个样式div：
<div style="width:80%;float:right;">
<router-outlet></router-outlet>
</div>
回答by mohit uprim
By using :hostwe can modify the style while loading the component.
通过使用:host我们可以在加载组件时修改样式。
:host(selector) { width:70% }
Following is the component:
以下是组件：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'test-selector',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent{
}
//test.component.css content
:host(test-selector) { width:70% } will reduce the width to 70%
回答by Val
The key is /deep/keyword:
关键是/deep/关键字：
:host /deep/ router-outlet + *:not(nav) {
width:80%;
float:right;
}
Since the component is dynamically loaded right after tag, the selector '+' matches anything next to it.
由于组件是在标签之后动态加载的，选择器“+”匹配它旁边的任何内容。
And the :not() selector excludes element in your template.
:not() 选择器排除模板中的元素。
Edited 2018/3/1:
2018/3/1 编辑：
Since Angular 4.3.0made /deep/deprecated, its suggested alternative is ::ng-deep. And there were a long discussionabout this.
回答by jcuypers
you could do the same with css grid. as width the accepted answer, it seems to only work in a surrounding div
你可以用 css grid 做同样的事情。作为宽度接受的答案，它似乎只适用于周围的 div
