角度2:设定路由器出口的宽度为< 100％ [英] Angular 2: Styling router-outlet to have width < 100%

问题描述

我正在构建一个Angular 2应用程序，该应用程序的侧面导航栏用于屏幕宽度大于500的屏幕，底部导航栏用于屏幕宽度小于500的屏幕.现在，我尝试为侧面分配20％的宽度条，占应用内容的80％.

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.

我遇到的问题是路由器出口的内容(即实际的应用程序)占据了页面的整个宽度，而不是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?

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的

Simple solution is to just put <router-outlet> in a styled div:

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

这篇关于角度2:设定路由器出口的宽度为< 100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！