毎日、Angularでの経験から、アドバイス、トリック、またはいくつかの役立つ記事を投稿しました。この動きは、開発者コミュニティによって温かく受け入れられ、サポートされました。
私は、最も好きな10のトリックに関する記事を書き、それらに示されている概念をより詳細に説明することにしました。
はじめましょう！
グローバルオブジェクトをトークン化します！
最も人気のあるツイートは、グローバルオブジェクトのDIトークンについて話します。
フロントエンドでは、地球環境に多くのオブジェクトがあるという事実に慣れています。ウィンドウ、ドキュメント、フェッチメソッド、場所などのオブジェクトを使用しますが、それらが存在することは期待していません。
ただし、たとえば、Angular UniversalまたはJestのテスト環境には、ブラウザ、ウィンドウオブジェクト、およびDOMはありません。また、これらのエンティティをトークンを介してアプリケーションに渡すことで、それらの使用、置換、またはコードのテストで問題が発生することはありません。
観察可能または対象からの継承
アプリケーションで優れたサービスを作成する多くの開発者を知っています。これらのサービスは1つのことをうまく行います。また、AngularエコシステムでRxJSを使用しているため、このようなサービスには、データを変換するためにObservableまたはSubjectを含むフィールドを1つだけ含めることができます。
このような状況は、ObservableまたはSubjectからサービスを継承することで簡略化できます。
ReplaySubjectとしての制御値
現在の値からストリームを開始して、リアクティブコントロールのvalueChangesをサブスクライブする必要がある場合があります。これで、ホイールを作り直す必要はありませんが、次のラッパーを自分に追加するだけです。
高DPIディスプレイ向けにアプリを改善する
高DPI画面でユーザーを簡単に追跡できることをご存知ですか？
さらに、ネイティブメディアタグを使用して、追加の作業なしで、このようなモニターに適した解像度のメディア要素を提供することもできます。
パイプを忘れないでください
パイプは、Angularフレームワークのスタイルで作業するための優れたツールです。これにより、コンポーネントテンプレート内で宣言を維持できます。一部のAngular開発者が独自のパイプの作成を避けているのは悲しいことです。それらを使用すると、ほとんどすべての状況でデータを適切に変換できます。
そして、これがデータ変換のためのユニバーサルパイプの例です：
バナナボックスを作る
このAngular機能には、banana-in-a-box、双方向バインディング、または単に入力-出力など、多くの名前があります。このアプローチは通常、[（ngModel）]を使用するときにフォームに表示されます。しかし、これを独自のコンポーネントに実装する方法を知っていますか？
RxJS-未知の世界
私は常に、使用するRxJSオペレーターのすべてのパラメーターとオーバーロードをチェックしようとしています。理由：それらの多くには隠されたオプションがあり、いくつかのストリームをより速く簡単に書くことができることを学びます。
さらに、人気のないオペレーターもいます。それらはめったに遭遇しませんが、巨大でトリッキーなストリームの代わりに、1行のコードでいくつかの特定の問題を解決できます。
たとえば、私にとってこれらの発見の1つは、distinctUntilChanged演算子の比較関数でした。
そして、RxJSについてのそのような人気のあるツイートもありました。コンポーネントを少し簡単に拡張できるようにするためのちょっとしたコツ：
または、defaultIfEmpty演算子を使用すると、1行のコード内でストリームに有用なロジックを追加できます。
ngForの代わりに独自の方法を書くこともできます
最後にもう1つ、Angularには、... of ...のようなディレクティブセレクター用の特別な構文があります。これを使用して、任意のタスク用に独自のngForを作成できます。
たとえば、簡単なngForを実行して、Mapオブジェクトを反復処理できます。または、ある番号から別の番号にインデックスを反復するための簡単な方法：
結論
Angularは大きく、より多くの機能を備えています。コミュニティと共有する予定のベストプラクティスから、新しいトリックやトリックについて多くのアイデアがあります。このような新しいツイートに興味がある場合は、Twitterでフォローしてください。そして、今日もいい日をお過ごしください！