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でデータをエクスポートするいくつかの方法の詳細な説明

推薦する

TypeScriptジェネリックの使用

目次1. 使いやすい2. 関数内でジェネリックを使用する3. クラス内でジェネリックを使用する4. ...

mysql8.0.12 でルートパスワードをリセットする方法

データベースをインストールした後、誤ってインストール ウィンドウを閉じたり、長期間 root ユーザ...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

実践的な経験を共有するためのコードチェックツールstylelintの紹介

目次序文文章1. stylelintをインストールする2. 設定ファイル3. stylelintを使...

nginxリバースプロキシによるセッション障害の問題の解決策

同僚から助けを求められました。バックエンド システムへのログインは成功したものの、システムには正常に...

MySQL FAQ シリーズ: 一時テーブルを使用する場合

一時テーブルの概要一時テーブルとは: MySQL は中間結果セットを保存するために使用されます。一時...

CSSプロパティに基づいたボタンホバーボーダーと背景アニメーションのコレクション

ハートの属性不透明度: .999 は要素のスタッキングコンテキストを作成し、ボタン6と8のアニメーシ...

Nginx で同じドメイン名を持つ複数のプロジェクトを構成する方法

Nginx を使用して同じドメイン名で複数のプロジェクトを構成するには、次の 2 つの方法があります...

ミニプログラムにより、製品属性の選択や仕様の選択が可能

この記事では、ミニプログラムで製品属性選択または仕様選択を実装するための具体的なコードを参考までに共...

Vue の基本 MVVM、テンプレート構文、データバインディング

目次1. Vueの概要Vue公式サイトMVVM アーキテクチャ パターンVue の紹介2. Vueを...

Centos7.6にTomcat-8.5.39をインストールする方法

Centos7.6 に Tomcat-8.5.39 をインストールする方法は次のとおりです。詳細は次...

Docker ベースの Jenkins のデプロイに関する詳細なチュートリアル

このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...

MySQLを5.7にアップグレードすると、WordPressはデータをインポートするときにエラー1067を報告します

最近MySQLを5.7にアップグレードしましたが、WordPressでデータのインポート時にエラーが...

一意の注文番号を生成するためのMySQLの高同時実行方法

序文このブログ記事が公開された後、何人かの友人からSQL Serverバージョンがあるかどうか尋ねら...

Zabbix が MySQL のマスター/スレーブ状態を監視する方法の詳細な説明

MySQLマスタースレーブを設定した後、スレーブの状態が正常かどうかわからないことが多く、例外が発生...