Angular 2:样式路由器出口具有宽度<100% [英] Angular 2: Styling router-outlet to have width &lt; 100%

问题描述

我正在构建一个 Angular 2 应用程序，它的侧边导航栏适用于宽度大于 500 的屏幕，底部导航栏适用于宽度小于 500 的屏幕.现在我试图为侧边分配 20% 的宽度bar，80% 用于应用内容.

我遇到的问题是路由器出口内容(即实际应用程序)占据了页面的整个宽度，而不仅仅是 80%.它似乎忽略了我试图给它的任何样式.我们不应该直接设置路由器插座的样式吗?或者也许有更好的方法可以让我忽略?

app.component.ts

import { Component, HostListener } from '@angular/core';@成分({选择器:'我的应用'，模板:`<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']})导出类 AppComponent {窗口 = [];ngOnInit(): 无效 {this.window.innerWidth = window.innerWidth;}@HostListener('window:resize', ['$event'])onResize(事件){this.window.innerWidth = event.target.innerWidth;console.log(this.window.innerWidth);}}

解决方案

简单的解决方案是将 放在一个样式化的 div 中:

<路由器插座></路由器插座>

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.

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

解决方案

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

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

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