Angular の 12 の典型的な問題について簡単に説明します

1. Angular 2 アプリケーションのライフサイクルフックとは何ですか?
2. Angular 1 と比較して、Angular 2 を使用する利点は何ですか?
3. Angular 2 ではルーティングはどのように機能しますか?
4. イベントエミッターとは何ですか? Angular 2 ではどのように機能しますか?
5. Angular 2 アプリケーションで codelyzer を使用するにはどうすればいいですか?
6. 遅延読み込みとは何ですか? Angular 2 で遅延読み込みを有効にする方法は?
7. Angular 2 アプリケーションではどのようなセキュリティ上の脅威に注意する必要がありますか?
8. パフォーマンスを向上させるために Angular 2 アプリケーションを最適化するにはどうすればよいでしょうか?
9. エディターの警告なしでカスタムタイプを実装するにはどうすればよいですか?
10. Shadow DOM とは何ですか? Angular 2 のパフォーマンス向上にどのように役立ちますか?
11. AOT コンパイルとは何ですか?その利点と欠点は何ですか?
12. Observable と Promise の主な違いは何ですか?
セルフチェッククイズ

1. Angular 2 アプリケーションのライフサイクルフックとは何ですか?

Angular 2 のコンポーネント/ディレクティブにはライフサイクルイベントがあり、@angular/core によって管理されます。 @angular/core はコンポーネントを作成し、レンダリングし、その子孫を作成してレンダリングします。 @angular/core のデータバインドされたプロパティが変更されると、ハンドラーが変更され、そのテンプレートが DOM から削除される前に破棄されます。 Angular は、ライフサイクルに活用して必要に応じてアクションを実行できるライフサイクルフック (特別なイベント) のセットを提供します。コンストラクターはすべてのライフサイクルイベントの前に実行されます。各インターフェースには、ng というプレフィックスが付いたフックメソッドがあります。たとえば、ngOnint インターフェイスの OnInit メソッドの場合、このメソッドはコンポーネントに実装する必要があります。

一部のイベントはコンポーネント/ディレクティブに適用されますが、いくつかのイベントはコンポーネントにのみ適用されます。

ngOnChanges: Angular が現在のオブジェクト値と以前のオブジェクト値を受け取るデータバインドプロパティを設定するときに応答します。
ngOnInit: 最初の ngOnChange がトリガーされた後にコンポーネント/ディレクティブを初期化します。これは、バックエンドサービスからテンプレートのデータを取得するために使用される最も一般的な方法です。
ngDoCheck: Angular コンテキストが変更されたときに検出して実行します。これは変更検出が実行されるたびに呼び出されます。
ngOnDestroy: Angular がディレクティブ/コンポーネントを破棄する前にクリーンアップします。メモリリークを回避するために、オブザーバブルからサブスクライブを解除し、イベントハンドラーからデタッチします。

コンポーネント固有のフック:

ngAfterContentInit: コンポーネントコンテンツが初期化されました
ngAfterContentChecked: Angular がビューに投影されるバインディングの外部コンテンツをチェックした後。
ngAfterViewInit: Angular がコンポーネントのビューを作成した後。
ngAfterViewChecked: Angular がコンポーネントのビューのバインディングをチェックした後。

2. Angular 1 と比較して、Angular 2 を使用する利点は何ですか?

1. Angular 2は単なる言語ではなくプラットフォームです

2. 速度とパフォーマンスの向上

3. 依存性注入の容易化

4. モジュール性とクロスプラットフォーム

5. ES6 と Typescript の利点があります。

6. 遅延ロード機能を備えた柔軟なルーティング

7. 学びやすい

3. Angular 2 ではルーティングはどのように機能しますか?

ルーティングは、ユーザーがビュー/コンポーネント間を移動できるようにするメカニズムです。 Angular 2 はルーティングを簡素化し、モジュールレベル (遅延読み込み) で構成および定義する柔軟性を提供します。

Angular アプリケーションにはルーターサービスのインスタンスが 1 つあり、URL が変更されるたびに、対応するルートがルート構成配列と照合されます。一致が成功するとリダイレクトが適用され、その時点でルータはルータの現在の状態を含む ActivatedRoute オブジェクトのツリーを構築します。リダイレクトする前に、ルータはガード (CanActivate) を実行して新しい状態が許可されているかどうかを確認します。ルートガードは、ルータがルートの承認を確認するために実行するインターフェイスメソッドです。ガードが実行されると、ルーティングデータが解析され、必要なコンポーネントが <router-outlet></router-outlet> にインスタンス化されてルーターの状態がアクティブ化されます。

さらに読む:

https://www.codeproject.com/Articles/1164813/Angular ルーティング

https://vsavkin.com/angular-2-router-d9e30599f9ea

4. イベントエミッターとは何ですか? Angular 2 ではどのように機能しますか?

Angular 2 には双方向ダイジェストサイクルがありません。これは Angular 1 と異なります。 Angular 2 では、コンポーネント内で発生した変更は常に現在のコンポーネントからそのすべての子コンポーネントに伝播されます。子コンポーネントへの変更を親コンポーネントの階層に反映する必要がある場合は、イベントエミッター API を使用してイベントを発行できます。

つまり、EventEmitter は @angular/core モジュールで定義されたクラスであり、コンポーネントとディレクティブによってカスタムイベントを発行するために使用されます。

@output() 何かが変更された = new EventEmitter();

イベントを発行するには、somethingChanged.emit(value) メソッドを使用します。これは通常、クラス内の値が変更されたときにセッターで使用されます。

サブスクリプションメソッドを使用すると、モジュールの任意のコンポーネントを通じてイベントサブスクリプションを実装できます。

myObj.somethingChanged.subscribe(val) => this.myLocalMethod(val));

さらに読む:

http://stackoverflow.com/questions/36076700/イベントエミッターの適切な使用法

https://angular.io/docs/ts/latest/api/core/index/EventEmitter-class.HTML

5. Angular 2 アプリケーションで codelyzer を使用するにはどうすればいいですか?

すべてのエンタープライズアプリケーションは、コードをより適切に維持するために、一連のコーディング規則とガイドラインに従います。 Codelyzer は、事前定義されたコーディングガイドラインに従って実行および準拠をチェックするためのオープンソースツールです。 Codelyzer は、Angular および TypeScript プロジェクトの静的コード分析のみを実行します。

Codelyzer は tslint 上で実行され、そのコーディング規則は通常 tslint.json ファイルで定義されます。 Codelyzer は、Angularcli または npm を介して直接実行できます。 Visual Studio Code や Atom などのエディターも codelyzer をサポートしており、基本的なセットアップを行うことで有効にすることができます。

Visual Studio Code で Codelyzer を設定するには、「ファイル」->「オプション」->「ユーザー設定」で tslint ルールへのパスを追加します。

{

    "tslint.rulesディレクトリ": "./node_modules/codelyzer",

    "typescript.tsdk": "node_modules/typescript/lib"

}

cli: ng lint からコードを実行します。

npmからコードを実行します: npm run lint

さらに読む:

https://github.com/mgechev/codelyzer

https://www.youtube.com/watch?v=bci-Z6nURgE

6. 遅延読み込みとは何ですか? Angular 2 で遅延読み込みを有効にする方法は?

ほとんどのエンタープライズアプリケーションは、特定のビジネスケース向けに設計されたさまざまなモジュールで構成されています。アプリケーションコード全体をバンドルして完全にロードすると、最初の呼び出しでパフォーマンスのオーバーヘッドが大幅に増加します。遅延読み込みを使用すると、ユーザーが操作するモジュールのみを読み込み、残りのモジュールは実行時に必要に応じて読み込むことができます。

遅延読み込みは、コードを複数のバンドルに分割し、必要に応じて読み込むことで、アプリケーションの初期読み込みプロセスを高速化します。

すべての Angular アプリケーションには、AppModule と呼ばれるメインモジュールが必要です。コードは、アプリケーションのビジネスケースに基づいて、さまざまなサブモジュール (NgModules) に分割する必要があります。

遅延読み込みを有効にした Plunkr の例:

1. ルートモジュールで遅延ロードされるモジュールをインポートしたり宣言したりする必要はありません。

2. 最上位ルーティング (app.routing.ts) にルートを追加し、loadChildren を設定します。 loadChildren はルートフォルダーから絶対パスを取得します。 RouterModule.forRoot() はルート配列を受け取り、ルーターを構成します。

3. サブモジュールにモジュール固有のルートをインポートします。

4. サブモジュールルーティングでは、パスを空の文字列 ""、つまり空のパスとして指定します。 RouterModule.forChild は、ルート配列を再度使用して、子モジュールコンポーネントのルーターをロードして構成します。

5. 次に、const ルートをエクスポートします: ModuleWithProviders = RouterModule.forChild(routes);

7. Angular 2 アプリケーションではどのようなセキュリティ上の脅威に注意する必要がありますか?

他のクライアント側アプリケーションや Web アプリケーションと同様に、Angular 2 アプリケーションもセキュリティリスクを軽減するためにいくつかの基本的なガイドラインに従う必要があります。いくつか例を挙げると:

1. コンポーネントに動的な HTML コンテンツを使用したり挿入したりしないでください。

2. 外部 HTML、つまりデータベースやアプリケーションの外部から取得した HTML を使用している場合は、それをサニタイズする必要があります。

3. 信頼できない場合は、アプリケーションに外部 URL を配置しないでください。信頼できない場合は URL リダイレクトを避けてください。

4. AOT コンパイルまたはオフラインコンパイルの使用を検討します。

5. API を制限し、既知または安全な環境/ブラウザを使用するアプリを選択することで、XSRF 攻撃を防ぎます。

さらに詳しい情報: https://angular.io/docs/ts/latest/guide/security.HTML#!#best-practices

8. パフォーマンスを向上させるために Angular 2 アプリケーションを最適化するにはどうすればよいでしょうか?

最適化は、アプリケーションの種類とサイズ、その他多くの要因によって異なります。しかし、一般的に、Angular 2 アプリケーションを最適化するときに考慮する点は次のとおりです。

1. AOT コンパイルを検討します。

2. アプリケーションがバンドルされ、醜くされ、ツリーシェイクされていることを確認します。

3. アプリケーションに不要なインポートステートメントがないことを確認します。

4. 使用されていないサードパーティライブラリがアプリケーションから削除されていることを確認します。

5. すべての依存関係と開発依存関係は明確に分離されています。

6. アプリが大きい場合は、アプリを完全にバンドルするのではなく、遅延読み込みを検討します。

さらに読む:

https://medium.com/@areai51/the-4-stages-of-perf-tuning-for-your-angular2-app-922ce5c1b294

https://www.lucidchart.com/techblog/2016/05/04/angular-2-best-practices-change-detector-performance/

9. エディターの警告なしでカスタムタイプを実装するにはどうすればよいですか?

ほとんどの場合、サードパーティのライブラリには、型定義用の .d.ts ファイルが付属しています。場合によっては、既存の型にさらにプロパティを追加して拡張したり、TypeScript の警告を回避するために追加の型を定義したりする必要があります。

外部ライブラリの型定義を拡張する必要がある場合は、node_modules または既存の types フォルダーを変更せず、すべてのカスタム型を格納するための「custom types」という名前の新しいフォルダーを作成することをお勧めします。

アプリケーション (JavaScript/Typescript) オブジェクトの型を定義するには、アプリケーションの対応するモジュールのモデルフォルダーにインターフェイスとエンティティクラスを定義する必要があります。

このような場合、独自の「.d.ts」ファイルを作成して型を定義または拡張できます。

さらに読む:

https://www.typescriptlang.org/docs/handbook/declaration-merging.HTML

https://typescript.codeplex.com/wikipage?title=Writing%20Definition%20%28.d.ts%29%20Files

http://stackoverflow.com/questions/32948271/extend-interface-defined-in-d-ts-file

10. Shadow DOM とは何ですか? Angular 2 のパフォーマンス向上にどのように役立ちますか?

Shadow DOM は HTML 仕様の一部であり、開発者が独自の HTML タグ、CSS スタイル、JavaScript をカプセル化できるようにします。 Shadow DOM は、他のテクノロジーとともに、開発者が独自のファーストクラスタグ、Web コンポーネント、<audio> タグなどの API を構築できるようにします。これらの新しいタグと API は総称して Web コンポーネントと呼ばれます。 Shadow DOM は、スタイルやスクリプトと他の HTML DOM 要素との競合を減らすことで、より適切な関心の分離を実現します。

Shadow DOM は本質的に静的であり、開発者がアクセスできないため、適切な候補となります。 DOM をキャッシュするため、ブラウザでのレンダリングが高速化し、パフォーマンスが向上します。さらに、Angular 2 アプリケーションの変更を検出し、ビューの再描画を効率的に管理しながら、Shadow DOM を比較的適切に管理できます。

さらに読む:

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

https://code.tutsplus.com/tutorials/intro-to-shadow-dom--net-34966

11. AOT コンパイルとは何ですか?その利点と欠点は何ですか?

AOT コンパイルは Ahead Of Time コンパイルの略で、Angular コンパイラがビルド時に Angular コンポーネントとテンプレートをネイティブ JavaScript と HTML にコンパイルします。コンパイルされた HTML と JavaScript は Web サーバーにデプロイされ、ブラウザがコンパイルとレンダリングの時間を節約できるようになります。

アドバンテージ：

1. ダウンロードの高速化: アプリケーションはすでにコンパイルされているため、多くの Angular コンパイラ関連のライブラリをバンドルする必要がなくなり、アプリケーションパッケージが小さくなり、アプリケーションのダウンロードが高速化されます。

2. HTTP リクエストの減少: アプリケーションが遅延読み込みをサポートするようにバンドルされていない場合 (または何らかの理由で)、関連する HTML および CSS ごとに個別のサーバーリクエストが発生します。ただし、プリコンパイルされたアプリケーションでは、すべてのテンプレートとスタイルがコンポーネントに合わせて調整されるため、サーバーへの HTTP リクエストの数は少なくなります。

3. レンダリングの高速化: アプリケーションが AOT コンパイルされていない場合、アプリケーションが完全に読み込まれたときにブラウザーでコンパイルプロセスが実行されます。これには、必要なすべてのコンポーネントがダウンロードされるのを待ってから、コンパイラがアプリケーションをコンパイルするのを待つ必要があります。 AOT コンパイルを使用すると、最適化を実現できます。存在する

4. ビルド時にエラーを検出: 事前コンパイルにより、多くのコンパイル時エラーを検出できるため、アプリケーションの安定性が向上します。

欠点:

1. HTMLとCSSにのみ適用され、他のファイルタイプでは前のビルド手順が必要です

2. ウォッチモードはありません。手動で実行し（bin/ngc-watch.js）、すべてのファイルをコンパイルする必要があります。

3. ブートストラップファイルの AOT バージョンを維持する必要があります (cli などのツールを使用する場合は不要)

4. コンパイルする前にクリーンアップ手順が必要です

さらに詳しい情報: https://angular.io/docs/ts/latest/cookbook/aot-compiler.HTML

12. Observable と Promise の主な違いは何ですか?

Stack Overflow からの違いは次のとおりです:

Promise は、非同期操作が完了または失敗したときに単一のイベントを処理します。

Observable は Stream (多くの言語) に似ており、0 個以上のイベントを配信でき、各イベントに対してコールバック関数が呼び出されます。 Observable は Promise の機能だけでなく他の機能も提供するため、通常は Promise よりも優先されます。 Observable を使用すると、0、1、またはそれ以上のイベントを処理できます。いずれの場合も同じ API を使用できます。 Observable はキャンセル可能であり、これも Promise よりも優れています。サーバーへの HTTP リクエストの結果やその他の非同期操作が不要になった場合、Observable のサブスクライバーはサブスクライブを解除でき、通知や提供される結果が必要ない場合でも、Promise は最終的に成功または失敗のコールバックを呼び出します。 Observable は、map、forEach、reduce などの配列のような演算子のほか、retry() や replay() などの非常に便利な強力な演算子も提供します。

Promise と Observable の比較

約束:

1. 単一の値を返す

2. キャンセル不可

観測可能項目:

1.複数の値を使用できる

2. キャンセル可能

3. map、filter、reduceなどの演算子をサポート

4. ES 2016で提案された機能

5. リアクティブ拡張機能 (RxJS) を使用する

6. 配列メンバーは時間の変化に応じて非同期的に取得できる

Angular 2 の正式版がリリースされており、一部の製品ではすでに Angular 2 の正式版をサポートしています。その中でもWijmoの対応が最も早く、Angular2がリリースされてから数時間後にはAngular2に対応したWijmoの正式版をリリースしました。 Wijmo は、各 UI コントロールに対して Angular2 コンポーネントを提供します。すべての Angular2 コンポーネントは、完全に宣言的なマークアップを提供します。

オリジナルリンク: https://www.codeproject.com/Articles/1169073/Angular-Interview-Questions