テーマを切り替える機能を備えたAngular 2+コンポーネントの作成

みなさんこんにちは。



したがって、外観設定、より単純にはテーマを動的に切り替える機能を実現する必要があるサイトを作成しているとしましょう。 テーマ（テーマ）は、コンポーネント（および実際にサイト全体）の外観を決定する一連のプロパティと呼ばれます。

Angularに1ページのアプリケーションがあり、非常に多くのコンポーネントがあり、そのうちの1つがButtonComponent（button.component.cssのスタイルをコンポーネントに接続する）であるとします。この例では、メカニズム全体を検討します。 そして、色のみが異なる「暗い」と「明るい」の2つのテーマを切り替える機能を実現する必要があります（一般的な場合、テーマ、サイズ、フォント、背景画像などに何でも入れることができます-それがすべてですcssから制御できるもの）。



元のライトスタイルは次のようになりました。

.my-button { padding: 10px; font-size: 14px; color: midnightblue; border: 1px solid mdnightblue; background: white; cursor: pointer; } my-button:disabled { pointer-events: none; cursor: default; color: grey; border: 1px solid grey; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、このような「暗い」場合：

 .my-button { padding: 10px; font-size: 14px; color: lightblue; border: 1px solid lightblue; background: midnightblue; cursor: pointer; } .my-button:disabled { pointer-events: none; cursor: default; background: grey; color: lightgrey; border: 1px solid lightgrey; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

共通部分を選択し、別のファイルに保存します。 コンポーネントのあるフォルダーに、button-core.component.cssという名前で配置します。 また、テーマごとに1つのファイルを作成し、それぞれbutton-light.component.cssおよびbutton-dark.component.cssと呼びます。 それらに何が含まれるかは既に明らかですが、完全を期すためにコードを提供します（見たくない人は自由にスクロールしてください）：



button-core.css：

 .my-button { padding: 10px; font-size: 14px; cursor: pointer; } .my-button:disabled { pointer-events: none; cursor: default; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

button-light.css：

 .my-button { color: midnightblue; border: 1px solid mdnightblue; background: white; } my-button:disabled { color: grey; border: 1px solid grey; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

button-dark.css：

 .my-button { color: lightblue; border: 1px solid lightblue; background: midnightblue; } .my-button:disabled { background: grey; color: lightgrey; border: 1px solid lightgrey; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、最終的に、button.component.css自体は次のようになります。

 @import 'button-core.css' @import 'button-light.css' @import 'button-dark.css'
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初にすべてのトピックの一般設定を接続し、次にデフォルトテーマのファイルを接続してから、残りすべてを接続する必要があることに注意してください。



次に、コードからなど、あるトピックから別のトピックに切り替える方法を見てみましょう。



これを行うには、セレクターhost-context（）が必要です。 彼は何をしていますか？ このセレクタは、要素のすべての親を介して実行される特定のcssクラスをルートまで検索します。 そして、彼がこのクラスを満たしている場合、説明された変更を適用します。 そして、ボタンから少し脱線し、その操作を例として検討することをお勧めします。 ネストされた2つのコンポーネント、parent-componentとchild-componentがあります。 Angularのおかげで、スタイルは互いに分離されており、それは良いことですが、たとえば、カーソルが親コンポーネント上にあるかどうかに応じて、子コンポーネントの外観を変更したい場合があります（ホバーイベント）。 もちろん、これらの目的のためにViewEncapsulation：noneを使用してカプセル化を削除するか、子コンポーネントに入力変数を追加できますが、これを行う方がはるかに簡単で正確です。

 :host-context(.parent-component:hover) .child-component { background: lightcoral; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

小さな本に戻りましょう。 何らかのスタイル（：host-context（.some-style））をホストコンテキストのマーカーとして置くことができます。 これで、ライトテーマファイルは次のようになります。



button-light.css：

 :host-context(.light-theme) .my-button { color: midnightblue; border: 1px solid mdnightblue; background: white; } :host-context(.light-theme) my-button:disabled { color: grey; border: 1px solid grey; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

暗いテーマの場合も同様です。



何を得たの？ さて、ボタンの親要素の1つだけがlight-themeクラスまたはdark-themeクラスを設定している場合、対応するクラスをファイルから接続することにより、外観を変更します。 ほとんどの場合、テーマはすぐにアプリケーション全体に適用されます。つまり、テーマをルート要素、たとえばapp-component（またはアプリケーションのブートストラップで記述するコンポーネント）からの外部divに切り替えます。 テーマフラグを入力して、外部要素に掛けることができます



[ngClass]="{'light-theme': theme === 'light', 'dark-theme': theme === 'dark'}".







さて、さらに言うと、すべてが明らかなようです。



CSSを使用せずにテーマを作成する簡単な方法を次に示します-プリプロセッサ。 この方法は不完全です、なぜなら 多くのコピーアンドペーストが含まれます。 sassプリプロセッサを使用すると、テーマをより簡潔に作成できます。 ただし、この方法には生命に対する権利もあります。



ご清聴ありがとうございました。誰かがそれを役に立つと思います。 記事に基づいて、そこからの一般的なすべてのアイデア。