角2：造型路由器出口具有宽度<100％

Question

我建立一个角2应用程序，它会对屏幕侧导航栏超过500更宽，和用于画面的底部导航栏500相比更窄现在我试图20％的宽度分配给边栏，80 ％到应用内容。

我的问题是路由器出口量（即实际应用）占用的页面，而不是只有80％的全宽。这似乎是忽略任何造型我尽量给它。难道我们不应该直接风格路由器的出口？或许还有就是我俯瞰更好的办法？

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);
  }
}

Answer 1

简单的办法就是干脆把<router-outlet>在风格div：

<div style="width:80%;float:right;">
    <router-outlet></router-outlet>
</div>

Answer 2

通过使用:host我们可以通过修改风格，同时加载组件。

:host(selector) { width:70% }

以下是部分：

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%

Answer 3

关键是/deep/关键字：

:host /deep/ router-outlet + *:not(nav) {
   width:80%;
   float:right;
}

由于该组件被标记之后动态加载，选择“+”匹配它旁边的任何东西。

和：不（）选择在模板中不包括的元素。

编辑2018年3月1日：

由于Angular 4.3.0国产/deep/过时，其建议的替代方案是::ng-deep。并有一个关于这个long discussion。

Answer 4

你可以做的CSS网格相同。作为宽接受的答案，它似乎只在周围工作的div