高度な Angular コンポーネント パターンの例

Angular はバージョン 5.x になりました。MVVM フレームワークについては、最初に angularjs に出会い、その後、プロジェクトのテクノロジ スタックの関係で、react に切り替えました。実際の作業の中で、MVVM フレームワーク自体、特に現在非常に人気のあるコンポーネントベースの開発において、いくつかの一般的なパターンを習得する必要があることに徐々に気づきました。このようにして、実際の作業で任意の MVVM フレームワークにシームレスに (またはほとんど時間とコストを費やさずに) 変換でき、節約された時間を新しい知識の学習に使用できます。

私は最近 Angular In Depth のブログをフォローしています。この一連の記事を時々拝見し、非常にクオリティが高いと思ったので、時間をかけて翻訳して皆さんと共有しました。各記事の最後に私自身の謙虚な意見を少し追加しましたが、私の意見が間違っている場合は、お気軽にコメントしてください。 Angular In Depth的博客，偶尔看到这个系列的文章，觉的质量还挺高，所以抽空余时间翻译并分享给大家，并在每个文章后面加了一点自己的拙见，希望可以达到抛砖引玉的效果，如果观点有误，还望各位看官轻喷。

如Kent C. Dodds Advanced React Component Patterns那样，我们将使用一个相对简单的<toggle>组件来说明这些模式。<toggole>组件的职责是仅仅是管理一个简单的布尔值状态属性: on。使用如此简单的组件进行说明的目的，是因为我们可以将更多的注意力投入到相对组件本身而言较复杂的模式中。

经过这一系列文章，我将提供包含完整功能的、可运行的演示代码链接。你仅仅需要将注意力集中到app文件夹和toggle文件夹。toggle文件夹包含一些可复用的库（一系列组件），当然这个库会随着文章的深入而改变。app文件夹并且特别是app.component.html，将针对库在不同的情形下的使用做出相应的改变。

我们将从最原始的toggle组件版本开始。它仅仅有一个使用了@Input()装饰器的on属性，这个属性所控制的状态代表组件本身的开关状态，同时它还有一个是使用了@Output()装饰器的toggle

Kent C. Dodds の高度な React コンポーネント パターンと同様に、比較的単純な <toggle> コンポーネントを使用してこれらのパターンを説明します。 <toggole> コンポーネントの役割は、単純なブール状態プロパティ on を管理することだけです。このような単純なコンポーネントを使用して説明する目的は、コンポーネント自体よりも複雑なパターンにもっと注意を向けることができるようにすることです。

この一連の記事を通じて、完全に機能し、実行可能なデモ コードへのリンクを提供します。 app フォルダーと toggle フォルダーに注目する必要があるだけです。 toggle フォルダーには、いくつかの再利用可能なライブラリ (一連のコンポーネント) が含まれています。もちろん、このライブラリは記事の進行に応じて変更されます。 app フォルダー、特に app.component.html は、さまざまな状況でのライブラリの使用方法に応じて変更されます。

オリジナルの toggle コンポーネント バージョンから始めます。 @Input() デコレータを使用する on 属性のみがあり、この属性によって制御される状態は、コンポーネント自体のスイッチ状態も表します。 @Output() デコレーターの toggle イベント エミッターが追加され、コンポーネントのスイッチ状態が変化したときに親コンポーネントに通知されます。 関連する推奨事項:

Angular コンポーネントに外部スタイルを導入する方法

Angular でモーダル ボックスをポップアップする 2 つの方法

🎜🎜🎜AngularJS チュートリアルとサンプル コード分析🎜🎜

以上が高度な Angular コンポーネント パターンの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。