角5と：ホスト擬似クラス

Question

私は問題なしで角度4の：host擬似クラスを使用しています。 Angular 5に変換していますが、スタイルはホストコンポーネントに追加されていないようです。 Angularの新しいバージョンでこれを追加する別の方法はありますか？

:host { 
    border: 10px solid black; 
    &.isLeft { 
    display: flex; 
    } 
} 

@media (max-width: 599px) { 
    :host { 
    display: flex; 
    } 
} 

isLeftクラスは、この特定のコントロールが応答する一方が2つの異なる形式で表示することができるので、親コンポーネントからコンポーネントに渡されたパラメータに基づいて設定されています。私はこのすべてを行うために@HostBindingを使用する提案がある知っている

@HostBinding('class.isLeft') isLeft: boolean; 

    @Input() 
    placement: string = 'responsive'; 

    ngOnInit() { 
    this.isLeft = (this.placement.toLowerCase() === 'left'); 
    } 

：コンポーネントの内部では、私は次のコードを持っています。まず第一に、私はメディアクエリを使用する必要があるときにどのように動作するのか分かりません。第二に、これで@HostBindingを使用する唯一の方法は、コンポーネント内にスタイリングを組み込むことです。これは当社の標準に反するものです。

ありがとうございます！

Answer 1

あなたは使用することができます

@HostBinding('style.border') styleborder = '10px solid black'; 

は、CSSでisLeftを定義し、置く：

@HostBinding('class.isLeft') someField: boolean = true; 

Answer 2

コードが

encapsulation: ViewEncapsulation.None 

が含まれていたものが削除されていることを、今取り組んでいます。