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

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

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

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

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

Angular サービスについて

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

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

forRoot() モード

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

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

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