Angular8+ の面接質問集: 基本的な知識ポイントの分析

この記事では、Angular8 に基づいた面接での質問をいくつか紹介し、Angular8 の基礎知識を深く理解していただきます。

関連する推奨事項: 2022 年の主要なフロントエンド インタビューの質問の概要 (コレクション)

Angular CLI について

Angular CLI (Angular Scaffolding とも呼ばれる) は、プロジェクトまたはコンポーネントのフレームワークを迅速に生成して効率を向上させるために使用されます。 Angular アプリ、コンポーネント、サービスなどは簡単に生成でき、パラメーターを通じて独自のニーズに応じて作成できます。 Angular開発には欠かせないツールと言えます。 [関連チュートリアルの推奨事項: "angular チュートリアル"]
参考: https://cli.angular.io/

• ng 生成: 新しいコンポーネント、サービス、パイプを作成、クラス etc
• ng new: 新しい angular アプリを作成します
• ng update: angular 自体とその依存関係をアップグレードします
• ng version: anugular cli のグローバル バージョンとローカル バージョンを表示しますangular cli、angular コードのバージョンなど。
• ng add: 新しいサードパーティ ライブラリを追加します。これは 2 つのことを行います。1) npm に基づいて node_modules をインストールします。2) 新しい依存関係が適切に動作するように設定ファイルを自動的に変更します。

Angular の依存関係の注入 (依存関係の注入) について

依存性注入は、Angular によって実装されるアプリケーション設計パターンであり、Angular の中核概念の 1 つです。

依存関係は、一連の機能を備えたサービスです。アプリケーション内のさまざまなコンポーネントやディレクティブ (派生) がサービスの機能を必要とする場合があります。 Angular は、これらの依存関係をコンポーネントやディレクティブに注入できるスムーズなメカニズムを提供します。したがって、アプリケーションのすべてのコンポーネント間に注入できる依存関係を構築しているだけです。

依存関係注入を使用すると、次のような利点もあります。

1. インスタンス化 (新しいインスタンス) が不要になります。クラス
2. Inject のコンストラクターでどのようなパラメーターが必要であるかを気にする必要はなく、一度注入すると (アプリ モジュールはプロバイダーを通じて注入されます)、すべてのコンポーネントを使用できます。さらに、同じサービス インスタンス (シングルトン) が使用されるため、サービス内のデータが共有され、コンポーネント間のデータ転送に使用できます。

Angular コンパイル、AOT と JIT の違いについて

すべての Angular アプリケーションには、ブラウザーが理解できないコンポーネントとテンプレートが含まれています。したがって、すべての Angular アプリケーションはブラウザ内で実行する前にコンパイルする必要があります。

Angular は 2 つのコンパイル タイプを提供します。

• JIT(Just-in-Time) コンパイル
• AOT(Ahead-of-Time) コンパイル

違いは、JIT コンパイルではアプリケーションが実行時にブラウザー内でコンパイルされるのに対し、AOT コンパイルではアプリケーションがビルド時にコンパイルされることです。
明らかに、AOT コンパイルには多くの利点があるため、これが Angular のデフォルトのコンパイル方法です。主な利点

• アプリケーションはブラウザ内で実行される前にコンパイルされるため、ブラウザは実行可能コードをロードしてアプリケーションをすぐにレンダリングするため、レンダリングが高速になります。
• AOT コンパイルでは、コンパイラーは外部 HTML および CSS ファイルをアプリケーションとともに送信するため、これらのソース ファイルに対する個別の AJAX リクエストが不要となり、Ajax リクエストが削減されます。
• 開発者はビルド段階でエラーを検出して処理できるため、エラーを最小限に抑えることができます。
• AOT コンパイラは、HTML とテンプレートをブラウザで実行する前に JS ファイルに追加します。したがって、読み取る必要のある冗長な HTML ファイルがなくなり、アプリケーションのセキュリティが強化されます。

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 を更新します。

Angular データ バインディングの 3 つの方法

<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 のモジュールについて

Angular のモジュールとは

#モジュールは、コンポーネント、サービス、パイプをグループ化できる場所です。モジュールは、コンポーネントやディレクティブなどの要素をエクスポートまたは非表示にすることで、他のモジュールがそれらを使用できるかどうかを決定します。各モジュールは @NgModule デコレータを使用して定義されます。

ルート モジュールと機能モジュールの違い。

各 Angular アプリケーションはルート モジュール (ルート モジュール) を 1 つだけ持つことができ、機能モジュール (機能モジュール) を 1 つ以上持つことができます。ルート モジュールは BrowserModule をインポートし、汎用モジュールは CommonModule をインポートします。

モジュールの遅延読み込み

プロジェクトが非常に大きい場合、最初の画面の読み込み速度を向上させるために、遅延読み込み。特定の URL にアクセスすると、一般的ではない機能モジュールのみが読み込まれます。

実装: 通常どおり機能モジュールを作成し、ルーティング構成を変更します。例:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

このように、コンパイル後、この機能モジュールは独立した JS になります。ユーザーが URL (~/customers) にアクセスしたときのみ、この独立した JS がサーバーからリクエストされ、その後ロードしました。、実装します。

参考 https://angular.io/guide/lazy-loading-ngmodules

ディレクティブ(Directive)とは

ディレクティブ(Directive)は動作を追加するために使用されます要素 (DOM) またはコンポーネント (Component) があります。

同時に、複数の命令を要素またはコンポーネントに適用できます。

Promise と Observable の違い

まず、新しいバージョンの anuglar では、Observable (RxJS に属する) の使用を推奨しています。次に、Observable オブジェクトの場合、 .toPromise() を使用して、それらを Promise オブジェクトに変換します。

• then が呼び出されるかどうかに関係なく、約束します。 Promise はすぐに実行されますが、Observable は呼び出されたとき (サブスクライブしたとき) にのみ作成および実行されます。

• Promise は値を返しますが、Observable は 0 ～ N の値を返します。したがって、Promise に対応する演算子は .then() で、Observable に対応する演算子は .subscribe

• Observable です。これは、map、filter、reduce などの演算子もサポートしています

• Observable はキャンセルできますが、Promise はキャンセルできません

Angular のパフォーマンスを向上させたい場合

Angularは依然として Web アプリケーションであるため、Web ページのパフォーマンスを向上させるための一般的な手法は普遍的です。 Angular の場合、特別な最適化テクニックがいくつかあります:

AOT コンパイル。前に述べたように、クライアント側でコンパイルしないでください。
• アプリケーションは最小化されています (uglify とツリーの揺れ)
• 不要な import ステートメントを削除します。余った場合は梱包時に同梱させていただきます。
• 未使用のサードパーティ ライブラリがアプリケーションから削除されていることを確認してください。同上。
• プロジェクトが大きい場合は、ホームページの読み込み速度を確保するために遅延読み込み (Lazy Loading) を検討してください。

Angular バージョンのアップグレード方法

Angular CLI にはアップグレード コマンド (ng update) が用意されており、同時に公式 Web サイト (https://update.angular.io) /) にはアップグレード ガイドもあります。アップグレード元のバージョンを選択すると、段階的なアップグレード コマンドが表示されるので、それを直接実行するだけです。

プログラミング関連の知識について詳しくは、

プログラミング学習をご覧ください。 ！

以上がAngular8+ の面接質問集: 基本的な知識ポイントの分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。