web-dev-qa-db-ja.com

Angular 2の変数からコンポーネントスタイルを設定します

私の目標は、「styles」属性を使用してコンポーネント変数からスタイル（この場合は高さと幅）を設定することです。単純なデータバインディングメソッドがあると思いますが、それは希望的観測かもしれません...

たとえば、HTML口ひげバインディングを使用していた場合、次のようになります。

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

明らかにこれはすべて間違っていますが、より可能性の高い順列を試してみましたが、Angularサイト、Stack Overflow、またはGoogleで解決策を見つけることができませんでした。この場合、理想的ではありません。

htmlcssangular
14
Methodician

Host要素は次のようにスタイルできます

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

およびコンテンツ（app/Nav/sidebar.comp.html） お気に入り

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

または

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

パーセント（％）を使用している場合は、これを試してください：

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