Angulaire 2: Style routeur-prise pour avoir la largeur < 100%

Je suis en train de construire Angulaire à 2 app qui aurait un côté de la barre de navigation pour les écrans plus large de 500, et un fond de la barre de navigation pour les écrans de moins de 500. Pour l'instant j'ai essayé d'attribuer 20% de la largeur de la barre latérale, 80% de contenu de l'application.

Le problème que j'ai, c'est que le routeur de sortie du contenu (c'est à dire l'application) prend toute la largeur de la page au lieu de seulement 80%. Il semble ignorer tout style j'ai essayer de lui donner. Ne sommes-nous pas censés style routeur-prise directement? Ou peut-être il ya une meilleure façon que je suis dominant?

app.composante.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);
  }
}

OriginalL'auteur Koen De Couck | 2016-10-13

  1. 17

    La solution la plus Simple est de mettre juste <router-outlet> dans un style div:

    <div style="width:80%;float:right;">
    <router-outlet></router-outlet>
</div>
    Cette technique ne fonctionne pas si vous utilisez 2 mises en page différentes. La div région est tiré, même si elle n'appartient pas à la 2ème mise en page.

    OriginalL'auteur Stefan Svrkota

  2. 11

    En utilisant :host on peut modifier le style lors du chargement du composant.

    :host(selector) { width:70% }

    Suivant est 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%

    OriginalL'auteur mohit uprim

  3. 3

    La clé est /deep/ mot-clé:

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

    Depuis le composant est chargé dynamiquement juste après la balise, le sélecteur sur " + " correspond à tout ce à côté de lui.

    Et l' :non() sélecteur exclut élément dans votre modèle.

    Édité 2018/3/1:

    Depuis Angulaire 4.3.0 fait /deep/ obsolète, son alternative proposée est ::ng-deep. Et il y avait un longue discussion à ce sujet.

    /deep/ est obsolète.
    Utilisation ::ng de profondeur au lieu de /de profondeur/

    OriginalL'auteur Val

  4. 0

    on pourrait faire la même avec grille css. comme la largeur de la accepté de répondre, il semble que travailler dans un div entourant

    OriginalL'auteur jcuypers