Angular のコンポーネント/サービスに関する簡単な説明

この記事では、Angular のコンポーネント/サービスを紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#Angular コンポーネントについて

css スタイル スコープ、Shadow DOM

Shadow DOM は HTML 仕様の一部であり、開発者が独自の HTML マークアップ、CSS スタイル、JavaScript をカプセル化できるようになります。スタイル コンポーネントを作成するときに、設定を通じて有効にすることができます。 [関連チュートリアルの推奨事項: "

angular Tutorial"]

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello World!</h1>
    <span class="red">Shadow DOM Rocks!</span>
  `,
  styles: [`
    :host {
      display: block;
      border: 1px solid black;
    }
    h1 {
      color: blue;
    }
    .red {
      background-color: red;
    }
  `],
  encapsulation: ViewEncapsulation.ShadowDom
})
class MyApp {
}

ViewEncapsulation オプションの値:

ViewEncapsulation.Emulated - Angular コンポーネントによって提供されるスタイル パッケージ化メカニズムを通じてカプセル化されます。 、コンポーネントのスタイルが外部の影響を受けないようにします。これは Angular のデフォルト設定です。
• ViewEncapsulation.Native - ネイティブの Shadow DOM 機能を使用します。ただし、ブラウザがそれをサポートしているかどうかを考慮する必要があります。
• ViewEncapsulation.None - Shadow DOM もスタイル パッケージ化もありません

Angular サービスについて

Service (サービス) はデータ アクセスとして機能します、論理処理関数。コンポーネントとサービスを分離して、モジュール性と再利用性を向上させます。

シングルトン サービス (シングルトン)

Angular CLI を使用してサービスを作成します。シングルトン サービスはデフォルトで作成されます。
• シングルトン サービスである @Injectable() の providedIn 属性を root として宣言します。
• シングルトン サービス (シングルトン) オブジェクトは、グローバル変数を一時的に保存するために使用できます。複雑なグローバル変数の場合は、状態管理コンポーネント (状態管理 - Ngrx) を使用することをお勧めします。

forRoot() モード

複数の呼び出しモジュールが同時にプロバイダー (サービス) を定義する場合、複数の機能モジュールでこのモジュールがロードされると、これらのサービスが複数の場所に登録されます。その結果、サービスのインスタンスが複数になり、サービスはシングルトンのように動作しなくなります。これを防ぐ方法はいくつかあります。

モジュールにサービスを登録する代わりに、providedIn 構文を使用します。
• サービスを独自のモジュールに分割します。
• モジュール内で forRoot() メソッドと forChild() メソッドをそれぞれ定義します。

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

プログラミング ビデオをご覧ください。 ！

以上がAngular のコンポーネント/サービスに関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。