Angular の @Component デコレータについての深い理解

1. @Componentデコレータ

1.1 @Componentデコレータの目的

コンポーネントを宣言する場合、コンポーネント クラスで @Component デコレータを使用して、これがコンポーネントであることを Angular に伝える必要があります。 [関連チュートリアルの推奨事項: "angular チュートリアル"]

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

@成分（{
  セレクター: 'app-product-alerts',
  templateUrl: './product-alerts.component.html',
  styleUrls: ['./product-alerts.component.css']
})
エクスポート クラス ProductAlertsComponent は OnInit {を実装します。

  コンストラクター() { }

  ngOnInit() {
  }

1.2

@Component @Componentの共通オプション

@ComponentデコレータはDirectiveから継承します。この CSS セレクタは、テンプレート内のディレクティブをマークし、ディレクティブのインスタンス化をトリガーするために使用されます。

1.2.1继承自@Directive装饰器的选项

1.2.2 @Component自己特有的选项

2. selectorセレクターは、

次のいずれかの形式を使用できます。

• element-name :
• 要素名に基づいて[attribute]を選択:
• 属性名に基づいて.class選択: クラス名に基づいて [属性=値] を選択
: select
• not(sub_selector) : 要素がサブセレクターと一致しない場合のみ selector1、selector2 を選択します sub_selector
• selector1, selector2
selector1

または selector2 がelement-nameと一致するかどうかにかかわらず、 2.1が選択されます: select

@Component({
    セレクター: 'アプリ要素',
    テンプレート: './element.component.html',
    styleUrls: ['./element.component.css']
})

<app-element></app-element>

2.2 [attribute] :

@Component({
    セレクター: '[アプリ要素]',
    テンプレート: './element.component.html',
    styleUrls: ['./element.component.css']
})

<div app-element></div>

2.3 .class :

@Component({
    セレクター: '.app要素',
    テンプレート: './element.component.html',
    styleUrls: ['./element.component.css']
})

<div class="app-element"></div>

3. host : {[key:string]:string}

一連のキーと値のペアを使用して、クラスのプロパティをホストのバインディングにマッピングします。要素 (プロパティ、属性、イベント)。
Angular は、変更検出中にホスト プロパティ バインディングを自動的にチェックします。 バインドされた値が変更されると、Angular はディレクティブのホスト要素を更新します。

• キーがホスト要素のプロパティである場合、プロパティ値は指定された DOM 属性に伝播されます。
• キーが DOM 内の静的属性である場合、属性値はホスト要素で指定されたプロパティに伝播されます。
• 属性の値はデフォルトで変数になることに注意してください。属性値を直接使用する場合は、

イベント処理用のコンポーネント内で変数を直接定義できます。

• そのキーは命令が監視したい DOM イベント。 グローバル イベントをリッスンするには、イベント名の前にリッスンするターゲットを追加します。 ターゲットはウィンドウ、ドキュメント、または本文です。
• その値は、イベントの発生時に実行されるステートメントです。このステートメントが false を返した場合、この DOM イベントのPreventDefault 関数が呼び出されます。 このステートメントでローカル変数 $event を参照して、イベント データを取得できます。

3.1 attributeとproperty

• プロパティ: DOM 要素は、childNodes、firstChild など、オブジェクトに添付されるコンテンツです
• 。 属性: HTML タグの属性は、DOM ノードに付属する属性です。

類似点と相違点:

• 一部の属性は、プロパティとプロパティの両方に属します。たとえば、id
• 属性は初期化後に初期化されず、プロパティのデフォルト値は dom によって更新されます。

dom 的propertyため、angular2 の双向バインディングの実装は、 dom 的propertyので、命令はプロパティにバインドされますが、場合によっては、colspan、rowspan などのプロパティが存在しません。HTML タグのプロパティをバインドしたい場合は、 attr :

<table を

width="100%" border="10px ソリッド">
  <tr>
    <th>月</th>
    <th>節約</th>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>1 月</td>
  </tr>
  <tr>
    <td [attr.colspan]=colnum>2 月</td>
  </tr>
</テーブル>

letcolnum:number = 2;

3.2 hostを使用してclassをバインドする

@Component({
    セレクター: '.app要素',
    テンプレート: './element.component.html',
    styleUrls: ['./element.component.css'],
    ホスト： {
        '[class.default-class]': 'useDefault'
    }、
    encapsulation: ViewEncapsulation.None // ホスト要素にも element.component.css スタイルを使用させます。それ以外の場合は、CSS 汚染を避けるためにデフォルトでカプセルが使用されます。
})
エクスポート クラス AppElementComponent {
  @Input() useDefault = true;
}

<div class="app-element"></div>

3.3 hostバインディングstyleを使用する

@Component({
    セレクター: '.app要素',
    テンプレート: './element.component.html',
    styleUrls: ['./element.component.css'],
    ホスト： {
        '[style.background]': 'inputBackground'
    }
})
エクスポート クラス AppElementComponent {
  @Input() inputBackground = 'red';
}

<div class="app-element"></div>

3.4 hostを使用してイベントをバインドする

@Component({
    セレクター: '.app-element',
    テンプレート: './element.component.html',
    styleUrls: ['./element.component.css'],
    ホスト： {
        '(クリック)': 'onClick($event)'
    }
})
エクスポート クラス AppElementComponent {
  パブリック onClick($event) {
    コンソール.ログ($event);
  }
}

<div class="app-element"></div>

4. encapsulation (encapsulation)

テンプレートと CSS スタイルのスタイルのカプセル化戦略。

4.1 Web コンポーネントは、

標準化された非侵入的な方法でコンポーネントをカプセル化します。各コンポーネントは、ページ上の他の要素不会干扰ことなく、独自の HTML 構造、CSS スタイル、および JavaScript コードを編成できます。

Web コンポーネントは、次の 4 つのテクノロジで構成されます。

• カスタム要素: カスタム要素 HTML
• テンプレート: HTML テンプレート
• Shadow DOM: Shadow DOMHTML
• Imports: HTML インポート

4.2 Shadow DOM

<!DOCTYPE html>
<html>
<頭>
    <meta charset="UTF-8">
    <title>シャドウ DOM</title>
    <style type="text/css">
        .shadowroot_son {
            色: #f00;
        }
    </スタイル>
</head>
<本文>
<p>私はシャドウホストに属していません</p>
<div>こんにちは、世界!</div>
<スクリプト>
 // シャドウホスト
 varshadowHost = document.querySelector('.shadowhost');
 // シャドウ ルート (シャドウ ルート) を作成します
 varshadowRoot =shadowHost.createShadowRoot();
 // シャドウ ルートはシャドウ ツリーの最初のノードであり、p ノードなどの他のノードはその子ノードです。
 shadowRoot.innerHTML = '<p>シャドウホストにいます</p>';
</script>
</body>
<html>

4.3 ViewEncapsulation

ViewEncapsulation では、次の 3 つのオプション値を設定できます。

• ViewEncapsulation.Emulated: Shadow DOM なし。ただし、コンポーネントは Angular が提供するスタイル パッケージ化メカニズムを通じてカプセル化されるため、コンポーネントのスタイルは外部の影響を受けません。これは Angular のデフォルト設定です。
• ViewEncapsulation.ShadowDom: ネイティブ Shadow DOM 機能を使用します
• ViewEncapsulation.None: Shadow DOM およびスタイル パッケージ化なし

4.3.1 ViewEncapsulation.None

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

@成分（{
  セレクター: 'my-app',
  テンプレート: `
    <h4>Angular ワールドへようこそ</h4>
    <p class="greet">こんにちは、{{name}}</p>
  `、
  スタイル: [`
    。挨拶する {
      背景: #369;
      色: 白;
    }
  `]、
  encapsulation: ViewEncapsulation.None // なし
})
エクスポート クラス AppComponent {
  名前: 文字列 = 'Semlinker';

、

ViewEncapsulation.None Shadow DOMがなくなり、すべてのスタイルがdocument整个に適用されます。つまり、コンポーネントのスタイルは受外界影响、覆盖可能性があります。

4.3.2 ViewEncapsulation.Emulated

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

@成分（{
  セレクター: 'my-app',
  ...、
  encapsulation: ViewEncapsulation.Emulated // なし
})
エクスポート クラス AppComponent {
  名前: 文字列 = 'Semlinker';

結果

ViewEncapsulation.Emulated Shadow DOM存在しませんが、コンポーネントのスタイルは不受外部影响ように、 Angularが提供する样式包装机制を通じてコン​​ポーネントがカプセル化されます。スタイルは引き続き整个documentに適用されますが、Angular は.greetクラスの[_ngcontent-cmy-0]セレクターを作成します。为组件定义的样式，被Angular 修改了がわかります。このうち、 _nghost-cmy- 和_ngcontent-cmy-实现局部的样式に使用されます。

4.3.3 ViewEncapsulation.ShadowDom

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

@成分（{
  セレクター: 'my-app',
  ...、
  encapsulation: ViewEncapsulation.ShadowDom // エミュレートされません |
})
エクスポート クラス AppComponent {
  名前: 文字列 = 'Semlinker';

結果

ViewEncapsulation.ShadowDomネイティブShadow DOM機能が使用されます。 Angular は、ブラウザーでサポートされているShadow DOM 形式渲染ます。