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

#環境:

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

1. 概要

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

angular チュートリアル"]

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

ng generate component 

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 {
  }

}

ログイン後にコピー

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

1. html ファイル メソッド

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

2. html コード メソッド

@Component({
  selector: 'app-component-overview',
  template: '
Hello World!
',
})

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

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

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

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

3.1. 特殊セレクター: 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: '
Hello World!
',
  styles: ['h1 { font-weight: normal; }']
})

4. 总结

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

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

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