この記事では、Angular8 に基づいた面接での質問をいくつか紹介し、Angular8 の基礎知識を深く理解していただきます。
関連する推奨事項: 2022 年の主要なフロントエンド インタビューの質問の概要 (コレクション)
Angular CLI (Angular Scaffolding とも呼ばれる) は、プロジェクトまたはコンポーネントのフレームワークを迅速に生成して効率を向上させるために使用されます。 Angular アプリ、コンポーネント、サービスなどは簡単に生成でき、パラメーターを通じて独自のニーズに応じて作成できます。 Angular開発には欠かせないツールと言えます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
参考: https://cli.angular.io/
依存性注入は、Angular によって実装されるアプリケーション設計パターンであり、Angular の中核概念の 1 つです。
依存関係は、一連の機能を備えたサービスです。アプリケーション内のさまざまなコンポーネントやディレクティブ (派生) がサービスの機能を必要とする場合があります。 Angular は、これらの依存関係をコンポーネントやディレクティブに注入できるスムーズなメカニズムを提供します。したがって、アプリケーションのすべてのコンポーネント間に注入できる依存関係を構築しているだけです。
依存関係注入を使用すると、次のような利点もあります。
すべての Angular アプリケーションには、ブラウザーが理解できないコンポーネントとテンプレートが含まれています。したがって、すべての Angular アプリケーションはブラウザ内で実行する前にコンパイルする必要があります。
Angular は 2 つのコンパイル タイプを提供します。
違いは、JIT コンパイルではアプリケーションが実行時にブラウザー内でコンパイルされるのに対し、AOT コンパイルではアプリケーションがビルド時にコンパイルされることです。
明らかに、AOT コンパイルには多くの利点があるため、これが Angular のデフォルトのコンパイル方法です。主な利点
Angular 双方向バインディングの原理
Angular 双方向バインディングバインディングでは、ダーティ チェックが実装されています。
ダーティ値検出の基本原理は、古い値を保存し、検出時に現時点の新しい値と古い値を比較することです。それらが等しい場合は変更はありませんが、そうでない場合は変更が検出され、ビューを更新する必要があります。
Zone.js は angular2 に含まれています。 setTimeout、addEventListener、promise などはすべて ngZone で実行されます (つまり、カプセル化され、zone.js によって書き換えられます)。Angular は ngZone で対応するフックを設定し、対応するダーティ チェック処理を行うように angular2 に通知します。次に DOM を更新します。
Angular の双方向バインディングの効率の問題
非常に多くの DOM 要素をバインディングする必要がある状況の場合ページ内に (数百または数千に) バインドされていると、必然的に効率の問題が発生します。 (詳細は PC とブラウザのパフォーマンスにも依存します)。なお、ダーティチェックが10回（経験値？）を超えると、プログラムに問題があるとみなされ、それ以上のチェックは行われなくなります。
これは次の方法で回避できます。
表示のみに使用されるデータの場合は、双方向バインディングではなく一方向バインディングを使用します。
Angular のデータ フローはトップダウンで、親コンポーネントから子コンポーネントへ一方向に流れます。一方向のデータ フローにより、効率的かつ予測可能な変更検出が保証されます。したがって、コンポーネント化はパフォーマンスを向上させる手段でもあります。
式 (および式によって呼び出される関数) であまり複雑でないロジックを記述します。
長すぎるパイプを接続しないでください (多くの場合、パイプは横断します)パイプは anglarJS (v1) ではフィルターと呼ばれます)
変更検出戦略 onPush. Angular には 2 つの変更検出戦略があります。デフォルトは Angular のデフォルトの変更検出戦略であり、上記のダーティ チェックです (変更されている限りすべての値をチェックします)。開発者は、シナリオに基づいてより効率的な変更検出方法、onPush を設定できます。 onPush 戦略は、入力データへの参照が変更された場合、またはイベントがトリガーされた場合にのみコンポーネントが変更検出を実行することを意味します。
NgFor は trackBy 方程式とともに使用する必要があります。それ以外の場合、NgFor は各ダーティ値検出プロセス中にリスト内の各項目の DOM を更新します。
<div>
<span>Name {{item.name}}</span> <!-- 1. 直接绑定 -->
<span>Classes {{item | classPipe}}</span><!-- 2. pipe方式-->
<span>Classes {{classes(item)}}</span><!-- 3.绑定方法调用的结果 -->
</div>ダイレクト バインディング: ほとんどの場合、これが を実行する最良の方法です。
バインディング メソッド呼び出しの結果: 各ダーティ値検出プロセス中に、クラス方程式を 1 回呼び出す必要があります。特別な必要がない場合は、この使用方法はできるだけ避けてください。
pipe メソッド: バインディング関数に似ており、ダーティ値検出 classPipe が呼び出されるたびに実行されます。ただし、Angular ではパイプが最適化され、キャッシュが追加されているため、項目が前回と等しい場合は結果が直接返されます。
その他の最適化のヒントについては、Angular バインディングのパフォーマンス最適化のヒント (ダーティ チェック)を参照してください。
Angular のモジュールとは
#モジュールは、コンポーネント、サービス、パイプをグループ化できる場所です。モジュールは、コンポーネントやディレクティブなどの要素をエクスポートまたは非表示にすることで、他のモジュールがそれらを使用できるかどうかを決定します。各モジュールは @NgModule デコレータを使用して定義されます。ルート モジュールと機能モジュールの違い。
各 Angular アプリケーションはルート モジュール (ルート モジュール) を 1 つだけ持つことができ、機能モジュール (機能モジュール) を 1 つ以上持つことができます。ルート モジュールは BrowserModule をインポートし、汎用モジュールは CommonModule をインポートします。モジュールの遅延読み込み
プロジェクトが非常に大きい場合、最初の画面の読み込み速度を向上させるために、遅延読み込み。特定の URL にアクセスすると、一般的ではない機能モジュールのみが読み込まれます。 実装: 通常どおり機能モジュールを作成し、ルーティング構成を変更します。例:const routes: Routes = [
{
path: 'customers',
loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
}
]; 同時に、複数の命令を要素またはコンポーネントに適用できます。
プログラミング学習をご覧ください。 ！
以上がAngular8+ の面接質問集: 基本的な知識ポイントの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
