コンポーネントにスタイルを渡す

Question

「かなり選択した」コンポーネントに取り組んでいます。いったんうまく動作すれば、私は人々にレビュー/使用するように指示します（これは私が持っている別のものです見つけ出す）。私が把握しようとしていることの1つは、誰かが私のコンポーネントを使いたいと思っていて、そのコンポーネントをスタイルすることができるようにしたいのです。

クラス/構造を公開し、ユーザーが/deep/を使用してスタイルを渡せるようにすることができますが、これはもっと理想的な方法だと思われます。また、コンポーネントの入力を作成してスタイルのオブジェクトを渡し、[ngStyle]ディレクティブを使用することもできますが、ユーザーが同じスタイルをコンポーネントの複数の部分に渡したい場合は、複雑になる可能性があります。

部品の構造は次のとおりです。

<div class="wrapper" [class.open]="showOptions"> 
    <ul class="options"> 
     <li *ngFor="let option of options" (click)="selectOption(option)">{{option.label}}</li> 
    </ul> 
    <div class="current" (click)="toggleOptions()">{{value.label}}</div> 
    <div class="dropdown" (click)="toggleOptions()"></div> 
</div> 

私はそれぞれに[ngStyle]を添付することができ、それは面倒なようです。より良い方法がありますか、それとも私が持っている最高のものですか？

Answer 1

あなたが述べたようにngStyleを使用するか、::ng-deep

* ::ng-deep child-comp dive.wrapper { 
    border: solid 3px red; 
} 

あなたはまた、ユーザーが環境変数を使用してSASSの輸入を設定できるようにするためにSASSとパス変数を使用することができます使用して外部からそれらのスタイルを設定することができます。