Angularでの子コンポーネント

チュートリアルの最初で触れたように、 Angularではプロジェクト全体がコンポーネントに分割されます。前のレッスンでは、デフォルトで作成されたメインコンポーネントのみを扱いました。では、子コンポーネントを作成する方法を学びましょう。

新しいコンポーネントのコードは、Angularによってターミナルの特別なコマンド：generate component を使用して自動生成されます。 componentという単語の後に、新しいコンポーネントの名前を書きます。 userコンポーネントを生成したいとしましょう：

ng generate component user

コマンドを実行した後、新しいフォルダ app/userが作成されていることがわかります。その中にはコンポーネントのすべての標準ファイルが配置されます。

コンポーネントファイルuser.component.tsには、コンポーネントのデコレータが自動的に作成されます：

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

また、このファイルにはコンポーネントクラスも自動的に作成されます：

export class UserComponent {

}

次に、この子コンポーネントを親コンポーネントに接続する必要があります。親コンポーネントとして、フレームワークインストール時にデフォルトで存在するコンポーネントappがあるとします。この中にコンポーネントをインポートしましょう：

import { UserComponent } from './user/user.component';

コンポーネントデコレータのキーimportsに、インポートしたコンポーネントを指定します：

@Component({
	selector: 'app-root',
	imports: [UserComponent], // ここ
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

これで、親コンポーネント内で子コンポーネントの内容を出力できるようになりました。これを行うには、親のテンプレートファイルに、子コンポーネントのデコレータ@Componentのプロパティselector で指定された名前の特別なタグを書きます。このケースでは、タグapp-userです。これを親のテンプレートに書きましょう：

some text
<app-user></app-user>

ProductComponentコンポーネントを生成してください。このコンポーネントを、プロジェクトのメインコンポーネントに接続してください。

子コンポーネントのテンプレートに変更を加えてください。ブラウザで変更が適用されることを確認してください。

子コンポーネントのCSSスタイルを変更してください。ブラウザでスタイルが適用されることを確認してください。

子コンポーネントにnameと priceのプロパティを作成してください。これらの値を子コンポーネントのテンプレートに出力してください。