ホームページ > 記事 > ウェブフロントエンド > Angular のコンポーネント (@Component) の基本知識に関する簡単な説明
この記事では、Angular のコンポーネント (@Component) の基礎知識を紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#環境:Angular CLI: 11.0.6
- Angular: 11.0.7
- ノード: 12.18.3
- npm : 6.14.6
- IDE: Visual Studio コード
angular チュートリアル"]
任意のコンポーネントは NgModule の一部であるため、他のアプリケーションや他のコンポーネントから呼び出すことができます。コンポーネントを NgModule のメンバーとして定義するには、開発者は、開発したコンポーネントを NgModule の宣言属性にリストする必要があります。 さらに、開発者はコンポーネント修飾子 (つまり @Component) を通じてメタデータを構成できるため、コンポーネントはさまざまなライフサイクル フックを通じて実行環境を制御できます。ng generate component f3fc15c0228dc320ab4107d8220f2b42例:
ng コンポーネント MyComponent を生成する AngularCLI はフォルダーと 4 つのファイルを自動的に生成します:
コンポーネントの場合、すべてのファイル名にコンポーネント接尾辞が自動的に追加されるため、8696afe76dbcdaf6d19aa8491c835386に「コンポーネント」という単語を含めることはお勧めできません。上記はコア ts ファイルで、セレクター (CSS セレクター)、テンプレート (html) ファイル、および css ファイルを指定します。必要に応じて、HTML/css ファイルを複数のコンポーネントで共有できます。特にcssに関してはパラメータがArrayになっているので複数のcssを定式化できることが分かります。@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. コンポーネント テンプレート
コンポーネント テンプレート、つまり 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', })
@Component({ selector: 'app-my-component', templateUrl: './my-component.component.html', encapsulation: ViewEncapsulation.None, styleUrls: ['./my-component.component.css'] })
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: 'app-my-component', template: '<h1>Hello World!</h1>', styles: ['h1 { font-weight: normal; }'] })
ng generate component XXX
可以简写为 ng g c
更多编程相关知识,请访问:编程视频!!
以上がAngular のコンポーネント (@Component) の基本知識に関する簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。