問題タブ [angular-flex-layout]

私は Angular(v5.0.2) と Angular-FlexLayout (v2.0.0-beta.10-4905443) を使用しています。@angular/flex-layout によって提供されるすべてのディレクティブでカスタム ブレークポイントを使用しようとしています。

カスタム ブレークポイントを追加しました。

ShowHideDirective を拡張しました。

ドキュメント@Optional() @Self()に近づくために を削除すると、エラーが発生します: 。プロバイダーに追加すると、 hereと同じエラーがトリガーされます。このように、ソース コードに従ってクラスを拡張します。No provider found for LayoutDirectiveLayoutDirective, ElementRef

app.module で定義したものを使用します。

画面のサイズに応じて要素を表示または非表示にします。

したがって、予想される動作は次のとおりです。 - 画面サイズに関係なく、利用可能なすべての mediaQueries が表示される最後の項目を除いて、1 行に 1 つの項目が正確に表示されます - 画面サイズに応じて、各行に fxHide または fxShow が表示されます

実際の動作は、添付のスクリーンショットに示されているとおりです:大きな画面、アクティブなカスタム メディア クエリ、小さな画面。

ShowHideDirective がデフォルトのブレークポイントに対して機能しなくなっていることがわかります。さらに、カスタム ブレークポイントがアクティブなときに要素を非表示にすることはできますが、反対の動作は機能しません。

すべての npm パッケージを利用可能な最新のものに既に更新し、node_modules フォルダーを削除してnpm install再度実行しましたが、効果はありませんでした。

LayoutDirective, ElementRefまた、プロバイダーのリストに追加してみました。次に、 hereと同じエラーが発生します。

showSmLandscapemyのメソッドに print を追加するCustomShowHideDirectiveと、メソッドが実際に呼び出され、正しい引数が指定されていることがわかります (私が知る限り)。fxShow についても同じことが言えます。

showand hide(node_modules フォルダに直接) に同じ種類のデバッグを追加するとShowHideDirective、 が正しい値で呼び出されることがわかります。

アイデア/ヒント/コメントは大歓迎です。rxjs からのオペレーターのロード中にエラーが発生したため、プランカーをまだ作成できていません...

編集：動作するプランカーがついにここで利用可能になりました（動作するということは、予期しない動作を示すことを意味します^^）

貢献していただきありがとうございます;）

私はこれらのコードのブロックを持っています

使用時に同じ行に配置したいのですがfxFlex="40%"、別の行に表示されます

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

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

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

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

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

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

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

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

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

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

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

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

ありがとう！