Angular のコンポーネント (@Component) の基本知識に関する簡単な説明-jsチュートリアル-php.cn

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

青灯夜游

リリース： 2021-06-11 10:44:44

転載

2584 人が閲覧しました

この記事では、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 アプリケーションの主要な構成要素です。各コンポーネントには次の部分が含まれます。

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

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

angular チュートリアル"]

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

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

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

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

ng generate component <component-name>

ログイン後にコピー

例:

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

コンポーネントファイル < コンポーネント名 >.component.ts (例: my-component.component.ts)
A CSS ファイル、< コンポーネント名 >.component.css (例: my-component.component.css)
テストファイル < コンポーネント名 >.component.spec.ts (例: my-component.component.spec.ts)

コンポーネントの場合、すべてのファイル名にコンポーネント接尾辞が自動的に追加されるため、<コンポーネント名>に「コンポーネント」という単語を含めることはお勧めできません。
@Component({
  selector: &#39;app-my-component&#39;,
  templateUrl: &#39;./my-component.component.html&#39;,
  styleUrls: [&#39;./my-component.component.css&#39;]
})
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: &#39;app-component-overview&#39;,
  templateUrl: &#39;./component-overview.component.html&#39;,
})

ログイン後にコピー

2. html コードメソッド

@Component({
  selector: &#39;app-component-overview&#39;,
  template: &#39;<h1>Hello World!</h1>&#39;,
})

ログイン後にコピー

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

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

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

ログイン後にコピー

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

3.1. 特殊セレクター: host

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

:host {
}

ログイン後にコピー

3.2. inline-styles

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

生成component如下

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

ログイン後にコピー