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

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

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

セルフチェッククイズ

Angular について学習したので、Angular をどの程度習得できたか知りたいですか?興味のある学生は「質問応答システム アプリケーション」の構築に挑戦できます。具体的な要件は次のとおりです。

  • テストビュー、レビュー結果、表示結果の3つのコンポーネントがあります。
  • json 形式で質問を受け入れます。サーバーから定義済みの形式で json を送信できます。Angular2 テスト アプリケーションは、クライアント側で回答インターフェイスを提示する必要があります。

完成した製品のインターフェースは次のとおりです。

デモ効果: http://ng2-quiz.anuraggandhi.com/

答えはここにあります(実装コード):https://www.codeproject.com/Articles/1167451/Quiz-Application-in-Angular

上記は、Angular の 12 の典型的な問題についての簡単な説明の詳細な内容です。Angular の 12 の典型的な問題の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー
  • Angularフレームワークのビュー抽象定義の詳細な説明
  • AngularJSにおける括弧の役割の詳細な説明
  • Angular SMS テンプレート検証コード
  • Angularにng-zorroを導入する際の問題に関する簡単な分析
  • Angular+IonicはqueryParamsを使用してページジャンプ値の転送を実装します
  • Angularでシンプルなユニットテストを実装する例
  • AngularJs の $http は POST リクエストを送信しますが、PHP は Post データを受信できません。問題と解決策
  • 折りたたみと展開の効果を実現するための Angular+ionic のサンプルコード

<<:  Zabbix で複数の JVM プロセスを監視する方法

>>:  MySQLでデータをエクスポートするいくつかの方法の詳細な説明

推薦する

CSS 水平方向の中央揃えと最大幅の制限

CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...

vue3 のコンポーネントの互換性のない変更の詳細な説明

目次機能コンポーネント非同期コンポーネントの書き方とdefineAsyncComponentメソッド...

VPS はオフライン ダウンロード サーバーを構築します (ネットワーク ディスクの時代以降)

モチベーション学習の必要性から、海外のサーバーメーカー(どこのメーカーかは言いません)のVPSサービ...

Vue シンプル登録ページ + 確認コード送信機能の実装例

目次1. エフェクト表示2. 検証コードとメールプッシュ管理の強化(後述のブログを参照) 3. 一般...

CSS3を使用してヘッダーアニメーション効果を作成する

Netease Kanyouxi公式サイト(http://kanyouxi.163.com/)(棚...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

Bootstrap 3.0 学習ノート CSS関連補足

この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....

MySQL 条件付きクエリと使用法および優先順位の例の分析

この記事では、例を使用して、MySQL 条件クエリ and or の使用方法と優先順位を説明します。...

XHTML 入門チュートリアル: XHTML タグ

XHTML タグの紹介<br />おそらく、前のセクションで、XHTML ファイルと通常...

Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)

序章nginx が優れたリバース プロキシ サービスであることは誰もが知っています。nginx を使...

Dockerコンテナを停止または強制終了できない問題の解決策

Docker バージョン 1.13.1問題プロセス特定の環境のMySQLコンテナを停止、強制終了、ま...

Vueカスタムコンポーネントはイベント修飾子を使用してピットレコードを踏む

序文今日、自作のコンポーネントを使っていたところ、突然、長い間忘れていたバブリングイベントに遭遇しま...

MySQL のインデックスとデータ テーブルを管理する方法

目次テーブルの競合を見つけて修正するインデックス統計の更新テーブルの競合を見つけて修正するデータ テ...

MySQL スケジュールされたデータベース バックアップ操作の例

この記事では、MySQL のスケジュールされたデータベース バックアップ操作の例について説明します。...

JavaScriptの浅いコピーと深いコピーについての簡単な説明

目次1. 直接譲渡2. 浅いコピー3. ディープコピー1. JSONオブジェクトメソッド2. 再帰コ...