Angular のコンポーネント スタイルの動作原理に関する簡単な説明

Angular コンポーネントの開発プロセスでは、対応する CSS ファイルにコンポーネント スタイルを記述することに慣れていますが、Angular がそれをどのように行うのかを理解したことがありませんでした。 . スタイルの分離。たとえば、コンポーネント A に h1 { color: red } が記述されている場合、このスタイルはコンポーネント A でのみ有効になり、他のコンポーネントには影響しません。この原理を探るためにこの記事を作成しており、以下の内容は Angular CLI バージョン 10.1.1 に基づいています。

コンポーネント スタイルの仕組み

探索

まず、Angular CLI を使用して新しい Angular プロジェクトを作成し、削除します Replace次のコンテンツを含む app.component.html のすべてのコンテンツ:

<h1>App Component</h1>
<button class="red-button">Button</button>

次のコンテンツを app.component.css に追加します:

.red-button {
  color: red;
}

そこで実行は次の HTML コードです:

<app-root _nghost-ydo-c11="" ng-version="10.1.1">
  <h2 _ngcontent-ydo-c11="">App component</h2>
  <button _ngcontent-ydo-c11="" class="red-button">Button</button>
</app-root>

app-root 要素に _nghost-ydo-c11 という名前のプロパティがあることがわかります。 app-root には、_ngcontent-ydo-c11 という名前の属性があります。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

それでは、これらの属性は何に使用されるのでしょうか?

わかりやすくするために、まず独立したコンポーネントを作成し、次の内容を含む新しいファイル blue-button.component.ts を作成します。

import { Component } from '@angular/core';

@Component({
  selector: 'app-blue-button',
  template: `
    <h2>Blue button component</h2>
    <button class="blue-button">Button</button>
  `,
  styles: [`
    .blue-button {
      background: blue;
    }
  `]
})
export class BlueButtonComponent {}

に配置します。 app.component.html で実行すると、次の HTML コードが表示されます。

app-blue-button# が表示されます。 ##_nghost-xxx で始まる属性と、app-root の他の要素と同じ属性もあります。コンポーネント内の両方の要素には、_ngcontent-yke-c11 という名前の属性があります。

Angular によって生成される属性文字列は実行のたびにランダムであるため、後続のコードに同様の属性が出現する場合は、このスクリーンショットに対応します。

概要

観察を通じて次のように結論付けることができます:

各コンポーネントのホスト要素には一意の属性が割り当てられます。コンポーネントの処理順序に応じて、例では
• _nghost_xxx
です。各コンポーネント テンプレートの各要素には、コンポーネントに固有の属性も割り当てられます。例では
• です。 _ngcontent_xxx

では、これらの属性はスタイルの分離にどのように使用されるのでしょうか?

これらのプロパティは CSS と組み合わせることができます。たとえば、例の青いボタンのスタイルを見ると、次の CSS が表示されます:

.blue-button[_ngcontent-yke-c11] {
    background: blue;
}

Angular であることがわかります。このメソッドを使用します。

blue-button クラスは、他のコンポーネントの要素に影響を与えることなく、この属性を持つ要素にのみ適用できます。

Angular のスタイル分離の動作がわかったところで、Angular はどのようにこれを実現するのでしょうか?

アプリが起動すると、Angular はスタイルまたは styleUrls コンポーネントのプロパティを使用して、どのスタイルがどのコンポーネントに関連付けられているかを確認します。次に、Angular はコンポーネント内の要素に固有のスタイルと属性を適用し、生成された CSS コードをスタイル タグでラップしてヘッダーに配置します。

上記は、Angular スタイルのカプセル化の原理です。

:host, :host-context, ::ng-deep

実際の開発では、このメカニズムがニーズに完全に一致しない場合があります。いくつかの特別なセレクターが導入されています。

:host

:host 擬似クラス セレクターを使用して、コンポーネント (ホスト要素) 自体に作用します。

たとえば、

app-blue-button に境界線を追加する場合、このコンポーネントのスタイルに次のコードを追加できます:

:host {
  display: block;
  border: 1px solid red;
}

Byランタイムの表示 コード内で、次のコード ブロックを確認できます。

  <style>
    [_nghost-yke-c11] {
      display: block;
      border: 1px solid red;
    }
  </style>

:host-context

コンポーネント ビューの内容に基づく場合もあります

外部 条件付きで適用されるスタイルは便利です。たとえば、ドキュメントの 要素のテーマを表す CSS クラスが存在する場合があり、それに基づいてコンポーネントのスタイルを設定する必要があります。

:host-context() 疑似クラス セレクターを使用できます。 :host() のような形式でも使用されます。現在のコンポーネントのホスト要素の 先祖ノード内で、ドキュメントのルート ノードに至るまでの CSS クラスを検索します。他のセレクターと組み合わせると非常に便利です。

次の例では、祖先要素の CSS クラスが

blue-theme であるか red-theme であるかに基づいて、どの CSS が有効になるかが決まります。

import { Component } from '@angular/core';

@Component({
  selector: 'app-btn-theme',
  template: `
    <button class="btn-theme">Button</button>
  `,
  styles: [`
    :host-context(.blue-theme) .btn-theme {
      background: blue;
    }
    :host-context(.red-theme) .btn-theme {
      background: red;
    }
  `]
})
export class BtnThemeComponent { }

次に、それが使用される場所:

<div class="blue-theme">
  <app-btn-theme></app-btn-theme>
</div>

実行中、ボタンの背景は青色になります。

::ng-deep

我们经常会使用一些第三方 UI 库，有时候我们想改变第三方组件的一些样式，这时候可以使用 ::ng-deep，但是要注意，Angular 已经把这个特性标记为已废弃了，可能在未来的版本就被完全移除掉。

:host ::ng-deep h2 {
  color: yellow;
}

通过查看运行时的代码：

[_nghost-yke-c12] h2 {
    color: yellow;
}

可以看到，样式会作用在 app-root 里的所有元素上，包括 app-root 中使用的其他组件里的元素。

总结

在实际开发中，灵活使用以上几种方式，基本上可以满足大部分场景。

更多编程相关知识，请访问：编程教学！！

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