Angular のコンポーネント (@Component) の基本知識に関する簡単な説明

この記事では、Angular のコンポーネント (@Component) の基礎知識を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#環境:

Angular CLI: 11.0.6
• Angular: 11.0.7
• ノード: 12.18.3
• npm : 6.14.6
• IDE: Visual Studio コード

1. 概要

コンポーネントは、Angular アプリケーションの主要な構成要素です。各コンポーネントには次の部分が含まれます。

ページ上に表示されるコンテンツを宣言するために使用される HTML テンプレート
• A 動作を定義するために使用される Typescript クラス
• A CSS セレクター。テンプレート内でコンポーネントがどのように使用されるかを定義するために使用されます。
• (オプション) テンプレートに適用される CSS スタイル

コンポーネントはページまたはコンポーネント (コントロール) です。 ）。常に、 はページ要素です。 [関連チュートリアルの推奨事項: "

angular チュートリアル"]

任意のコンポーネントは NgModule の一部であるため、他のアプリケーションや他のコンポーネントから呼び出すことができます。コンポーネントを NgModule のメンバーとして定義するには、開発者は、開発したコンポーネントを NgModule の宣言属性にリストする必要があります。

さらに、開発者はコンポーネント修飾子 (つまり @Component) を通じてメタデータを構成できるため、コンポーネントはさまざまなライフサイクル フックを通じて実行環境を制御できます。

2. コンポーネントの作成

AngularCLI をベースに、コンポーネントを簡単に作成できます。コンポーネントを作成するディレクトリで、次のコマンドを実行します

ng generate component <component-name></component-name>

例:

ng コンポーネント MyComponent を生成する AngularCLI はフォルダーと 4 つのファイルを自動的に生成します:

コンポーネントにちなんだ名前のフォルダー (例: my-component)
• コンポーネント ファイル .component.ts (例: my-component.component.ts)
A テンプレート ファイル .component.html (例: my-component.component.html)
• A CSS ファイル、.component.css (例: my-component.component.css)
• テスト ファイル .component.spec.ts (例: my-component.component.spec.ts)

コンポーネントの場合、すべてのファイル名にコンポーネント接尾辞が自動的に追加されるため、に「コンポーネント」という単語を含めることはお勧めできません。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

上記はコア ts ファイルで、セレクター (CSS セレクター)、テンプレート (html) ファイル、および css ファイルを指定します。必要に応じて、HTML/css ファイルを複数のコンポーネントで共有できます。特にcssに関してはパラメータがArrayになっているので複数のcssを定式化できることが分かります。

2.1. コンポーネント テンプレート

コンポーネント テンプレート、つまり HTML 部分は、HTML ファイルまたは HTML 記述にすることができます。 、等価です。 Angular コンポーネントには、template または templateUrl で定義されたテンプレートが必要です。ただし、コンポーネント内に両方のステートメントを同時に含めることはできません。

1. html ファイル メソッド

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

2. html コード メソッド

@Component({
  selector: 'app-component-overview',
  template: '<h1 id="Hello-World">Hello World!</h1>',
})

3.ビューのカプセル化モード

Angular では、コンポーネントの CSS スタイルは、アプリケーションの他の部分に影響を与えることなく、独自のビューにカプセル化されます。この部分は設定を通じて制御することもできます。

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./my-component.component.css']
})

encapsulation 属性 (カプセル化モードの表示) が追加されていることがわかります。コンポーネントのメタデータにビューのカプセル化モードを設定することで、各コンポーネントのカプセル化モードを個別に制御できます。オプションのカプセル化モードは次のとおりです。

エミュレート モード (デフォルト値) は、CSS コードを前処理 (および名前変更) して、CSS スタイルをコンポーネントの目的に限定することで Shadow DOM の動作をシミュレートします。詳細については、付録 1 を参照してください。 (注: グローバル スタイルは入力のみで、出力はできません。コンポーネント スタイルは出力できません)
1. ShadowDom モードは、ブラウザーのネイティブ Shadow DOM 実装を使用して、コンポーネントのホスト要素に Shadow DOM をアタッチします。コンポーネントのビューはこの Shadow DOM にアタッチされ、コンポーネントのスタイルもこの Shadow DOM に含まれます。 (説明: 入口も出口もありません。どのスタイルも入ってくることはできず、コンポーネント スタイルは出ていくこともできません。)
2. None は、Angular がビューのカプセル化を使用しないことを意味します。 Angular はグローバル スタイルに CSS を追加します。前述のスコープ ルール、分離、保護は適用されません。基本的に、これはコンポーネントのスタイルを HTML に直接配置することと同じです。

3.1. 特殊セレクター: host

使用: ホスト疑似クラス セレクターを使用して、コンポーネントのホスト要素要素を選択します (相対コンポーネントテンプレート内の要素)。 :host オプションは、ホスト要素をターゲットにする唯一の方法です。そうしないと、ホストはコンポーネント自体のテンプレートの一部ではなく、親コンポーネントのテンプレートの一部であるため、ホストを指定できません。 ＃＃＃＃＃＃例えば。＃＃＃

:host {
}

3.2. inline-styles

默认AngularCLI生成的component，css在一个单独文件中。当然，同html模板类似，如果需要，你也可以制定css样式写在ts中， 不单独放到一个文件中。命令：ng generate component MyComponent --inline-style。

生成component如下

@Component({
  selector: 'app-my-component',
  template: &#39;<h1 id="Hello-nbsp-World">Hello World!</h1>&#39;,
  styles: [&#39;h1 { font-weight: normal; }&#39;]
})

4. 总结

• Angular CLI辅助创建一个component所需的多个文件
• 建议html/css/ts分开
• 在期望目录下执行Angular CLI命令，可以生成到制定目录
• ng generate component XXX 可以简写为 ng g c

更多编程相关知识，请访问：编程视频！！

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