Angular 2の複数のディレクティブを操作する方法

Question

数週間前にAngular 2を使い始めましたが、ここで何か問題が発生しています。私は、Ionic 2で再利用可能なカスタムコンポーネントを作成したいと考えています。たとえば、異なるサイズのカスタムボタンを作成することに決めたとします。 sm-sizeとroundedは私のコンポーネントに特定のCSSコードを注入します

<btn-custom sm-size rounded> </btn-custom>

。属性ディレクティブだと思っていましたが、どうやってそれを操作できるのか分かりません。誰かがそれを理解するのを助けてくれますか？

Answer 1

を@Input()を使用できますかsがあなたの成分の含有量にスタイルとクラスを適用するように設定するかどうか、あなたは、ホスト要素と[style.xxx]にスタイルやクラスのバインディングを適用するために@HostBinding()を使用することができ、[ngStyle]、[class.xxx]、および[ngClass]されています

@Component({ 
    template: ` 
<button [style.with.px]="smSize ? 250 : 150">click me</button> 
<!-- or --> 
<button [ngClass]="smSize ? 'big' : 'small'">click me</button> 
}) 
class ButtonCustom { 

    private _smSize:boolean; 

    get isSmSize:boolean() { 
    return this._smSize; 
    } 

    @Input() 
    set smSize(value:any) { 
    this._smSize = value != 'false'; // treat everything as `true` except `'false'` 
    } 

    @HostBinding('style.border-radius') 
    borderRadius:number = 0; 

    private _rounded:boolean; 

    get isRounded:boolean() { 
    return this._rounded; 
    } 
    @Input() 
    set rounded(value:any) { 
    this._rounded = value != 'false'; // treat everything as `true` except `'false'` 
    this.borderRadius = this._rounded ? 3 : 0; 
    } 
} 

セッター属性が値なしで設定されているかどうかについての情報を取得する方法です

<btn-custom smSize rounded> 

対

<btn-custom smSize="50" rounded="true"> 
<btn-custom [smSize]="50" [rounded]="true"> 

Answer 2

ここでngStyleディレクティブを使用して、適用する追加のスタイルをコンポーネントに伝える必要があります。あなたがスタイルを注入できるスタイルディレクティブを使用して

https://angular.io/docs/ts/latest/api/common/index/NgStyle-directive.html https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngStyle

。

あなたが事前に定義されたクラスを持っているなら、ngClassはあなたが必要なもののように見えた、最高の仕事とは：

<btn-custom [ngClass]="{'sm-size rounded' : true}">...</btn-custom> 

https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

このガイドでは役立ちます：

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngClass