web-dev-qa-db-fra.com

Définir le style de composant à partir de la variable dans Angular 2

Mon objectif est de définir un style (hauteur et largeur dans ce cas) à partir d'une variable de composant en utilisant l'attribut "styles". Je pense qu'il existe une méthode simple de liaison de données, mais cela peut être un vœu pieux ...

Par exemple, si j'utilisais la liaison html moustache, cela pourrait ressembler à ceci:

@Component({
    selector: '[sidebar]',
    templateUrl: 'app/Nav/sidebar.comp.html',
    styles: [`
        .sidebar-nav {
            overflow: scroll;
            height: {{ height }};
        }
        .sidebar {
            height: {{ 0.9 * height }};
            width: {{ 0.21 * width }};
        }
    `]
})

export class SidebarComp {
    width: number;
    height: number;

    constructor() {
        this.height = window.innerHeight;
        this.width = window.innerWidth;
    }
}

Évidemment, tout cela ne va pas, mais j'ai essayé des permutations plus probables et je n'ai pas eu de chance de trouver des solutions sur le Angular, Stack Overflow ou Google. Je peux être réduit à utiliser ngStyle inline mais c'est pas idéal dans ce cas.

htmlcssangular
14
Methodician

Vous pouvez styliser l'élément Host comme

@Component({
  selector: '[sidebar]',
  templateUrl: 'app/Nav/sidebar.comp.html',
  Host: {
    '[style.height.px]':'0.9 * height',
    '[style.width.px]':'0.21 * width'
  }

})

export class SidebarComp {
    width: number;
    height: number;

    constructor() {
        this.height = window.innerHeight;
        this.width = window.innerWidth;
    }
}

et le contenu (app/Nav/sidebar.comp.html) comme

<div class="sidebar-nav" [style.overflow]="'scroll'" [style.height.px]="height">

ou

<div class="sidebar-nav" [ngStyle]="{overflow: 'scroll', height: height + 'px'}">
23
Günter Zöchbauer

Si vous utilisez un pourcentage (%), essayez ceci:

<div class="sidebar-nav"   [style.height.%]="height">
1
MedElmaachi