Angularの親コンポーネントが子コンポーネントを呼び出す方法

2年 ago
結衣, 春花
1 minute

Angularで、親コンポーネントは、テンプレート内で子コンポーネントのセレクタを使用することで、子コンポーネントを呼び出すことができます。以下に簡単な例を示します。

親コンポーネントのテンプレートで、子コンポーネントのセレクタを使用して子コンポーネントを呼び出す：

<app-child></app-child>

子コンポーネントでは、@Inputデコレータを使うことにより、親コンポーネントから渡されたデータを受け取ることができます。

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>{{ childData }}</p>'
})
export class ChildComponent {
  @Input() childData: string;
}

親コンポーネントのクラス内で、子コンポーネントのプロパティに値を代入することで、子コンポーネントにデータを渡すことができます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: '<app-child [childData]="parentData"></app-child>'
})
export class ParentComponent {
  parentData: string = 'Hello from parent component';
}

このサンプルでは、親コンポーネントは子コンポーネントのchildDataプロパティに値を割り当てることで子コンポーネントにデータを渡しています。子コンポーネントは補間表現{{ childData }}を使用して、受信したデータを表示しています。

これにより、親コンポーネントは子コンポーネントを直接呼び出して、データを渡すことができます。

bannerAds