ホームページ  >  記事  >  ウェブフロントエンド  >  Angular のコンポーネント (@Component) の基本知識に関する簡単な説明

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

青灯夜游
青灯夜游転載
2021-06-11 10:44:442539ブラウズ

この記事では、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 f3fc15c0228dc320ab4107d8220f2b42
例:

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

    コンポーネントにちなんだ名前のフォルダー (例: my-component)
  • コンポーネント ファイル a32b08e2ba17676ceaae4e2aadee4824.component.ts (例: my-component.component.ts)
  • A テンプレート ファイル a32b08e2ba17676ceaae4e2aadee4824.component.html (例: my-component.component.html)
  • A CSS ファイル、a32b08e2ba17676ceaae4e2aadee4824.component.css (例: my-component.component.css)
  • テスト ファイル a32b08e2ba17676ceaae4e2aadee4824.component.spec.ts (例: my-component.component.spec.ts)
コンポーネントの場合、すべてのファイル名にコンポーネント接尾辞が自動的に追加されるため、8696afe76dbcdaf6d19aa8491c835386に「コンポーネント」という単語を含めることはお勧めできません。

@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: '4a249f0d628e2318394fd9b75b4636b1Hello World!473f0a7621bec819994bb5020d29372a',
})

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>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 サイトの他の関連記事を参照してください。

声明:
この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。