web-dev-qa-db-fra.com

Angular 2: Styling routeur-prise pour avoir une largeur <100%

Je construis une Angular 2 application qui aurait une barre de navigation latérale pour les écrans plus larges que 500, et une barre de navigation inférieure pour les écrans moins larges que 500. Pour l'instant, j'essayais d'attribuer une largeur de 20% dans la barre latérale, 80% du contenu de l'application.

Le problème que j'ai est que le contenu du routeur-prise (c'est-à-dire l'application réelle) occupe toute la largeur de la page au lieu de 80% seulement. Il semble ignorer tout style que j'essaie de lui donner. Ne sommes-nous pas censés styler directement routeur-prise? Ou peut-être y a-t-il un meilleur moyen que je néglige?

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);
  }
}
cssangularangular2-template
4
Koen De Couck

La solution simple consiste simplement à mettre <router-outlet> dans une div stylée:

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

En utilisant :Host, nous pouvons modifier le style lors du chargement du composant.

:Host(selector) { width:70% }

Voici le composant:

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%
11
mohit uprim

La clé est / deep / mot clé:

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

Comme le composant est chargé dynamiquement juste après la balise, le sélecteur '+' correspond à tout ce qui se trouve à côté.

Et le sélecteur: not () exclut un élément de votre modèle.

Édité le 2018/3/1:

Puisque Angular 4.3.0 a rendu /deep/ obsolète, son alternative suggérée est ::ng-deep. Et il y a eu une longue discussion à ce sujet.

2
Val

vous pouvez faire la même chose avec css grid. comme largeur de la réponse acceptée, il semble ne fonctionner que dans une div environnante

0
jcuypers