web-dev-qa-db-ja.com

コンポーネントの：Host要素にngStyleを適用する方法は？

私はこのようなものを持っています：

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'column',
    template: '<ng-content></ng-content>'
})
export class ColumnComponent {

    @Input() columnWidth: string = '0';        

    constructor() {}
}

プロパティを適用したいcolumnWidth to [ngStyle] on

<ng-content></ng-content>

親要素、次のようなことを行うには：

<div [ngStyle]="{'width': columnWidth+'px'}" > ....

Host要素にスタイルを適用する方法を知っています：

:Host {  /*styles*/  }

しかし、私はそれにパラメータを渡すことを知りません。

angularshadow-domangular2-template
13
Dariusz Filipiak

これを行う方法はありません。

あなたにできることは

@HostBinding('style.width')
width:string = '10px';

または

@HostBinding('style.width.px')
width:number = '10';

主な制限は、width部分が固定されており、変数から使用できないことです。

完全な柔軟性を備えた別の方法は

constructor(private elRef:ElementRef, private renderer:Renderer) {}

setStyles() {
  this.renderer.setElementStyle(this.elRef.nativeElement, 'width', '10px');
}
17
Günter Zöchbauer

私は実際に@GunterZochbauerのソリューションを使用しましたが、変数は使用できないと彼は言いました。たぶんその時は正しかったのですが、最新の角度で、あなたは完全に可能でした。

@HostBinding('style.width.px')
get width(): number {
  return state.width;
}

状態管理を使用して幅を設定し、それをHost要素に直接適用しています。それは素晴らしい働きをします！

1
christo8989