angular - 一般的な AngularFlexLayout プロパティを再利用する方法

Question

アプリでサイジングを行うためにangular-flex-layoutを使用しています。アプリの複数の場所で使用するタグがいくつかあります。たとえば、このブロックはすべての「最上位」の div に使用されます。

<div ...
     fxFlex="900px"
     fxFlex.lt-md="90%"
     ... >

後でリファクタリングしたい場合に変更する必要がある場所が 1 つだけになるように、これを変更する方法を見つけようとしています。

私が検討したオプション：

オプション #1 - これには fxFlex を使用しないでください

これは、fxFlex ではうまく機能しないユースケースかもしれません。私はこれを行うことができると思います：

<div ...
     class="mainWidthApp"
     ... >

次に、メディア クエリを使用して CSS を記述し、複数のページ幅を処理できます。うん。本当にこれをしたくありません。

オプション 2 - fxFlex を使用して新しいディレクティブを作成する

これにより、次のようなことができます。

<div ...
     jakeAppWidth
     ... >

次に、次のようなことを行うディレクティブを定義できます。

import { Directive, ElementRef } from '@angular/core';

@Directive({
    selector: '[jakeAppWidth]'
})
export class AppWidthDirective {

    constructor(element: ElementRef) {

        // Not sure how to do this yet, but do something like: 
        element.addSubDirective( fxFlex="900px" );
        element.addSubDirective( fxFlex.lt-md="90%" );

    }

}

ディレクティブを追加するディレクティブが可能かどうかは不明です。まだこれを調べています。

オプション #3 - その他...

これはかなり一般的な問題であるに違いないと思います。すぐに使えるソリューションがあるかもしれません。

ありがとう！