css – Angular 2：造型路由器出口宽度<100％

我正在构建一个Angular 2应用程序,它有一个侧导航栏,用于宽度超过500的屏幕,以及一个底部导航栏,用于宽度小于500的屏幕.现在我试图为侧栏指定20％的宽度,80 ％到应用内容. 我遇到

... . . 我正在构建一个Angular 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);  }}

.

解决方法

. 简单的解决方案是将< router-outlet>放入在一个风格的div：

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

. . .. ...