🐣

Angularの公式チュートリアルをやっていく　その６ - Add inputs to components

2023/06/11に公開

Angular

Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。

今回やるのは、↓の部分です。

Input デコレーターをインポート

Inputデコレーターをhousing-location.component.tsファイルにインポートしていきます。

このいきなり出てきたInputデコレーターってなんやねん、という話なのですが（このページには全く説明載ってないですね……）。

調べたところ、コンポーネント間のデータ受け渡しを行う機能のようです。

Inputデコレーターはその中でも、親コンポーネント→子コンポーネントへのデータ受け渡しを行う機能みたいですね。（子コンポーネント→親コンポーネントはOutputデコレレーターというのを別に使うらしい）

まずは習うより慣れろで、実際に使ってみましょう。

下記のようにhousing-location.component.tsを変更していきます。

housing-location.component.ts

- import { Component } from '@angular/core';
+ import { Component, Input } from '@angular/core';
  import { CommonModule } from '@angular/common';
+ import { HousingLocation } from '../housinglocation';
  
  @Component({
    selector: 'app-housing-location',
    standalone: true,
    imports: [CommonModule],
    template: `
      <p>
        housing-location works!
      </p>
    `,
    styleUrls: ['./housing-location.component.css']
  })
  export class HousingLocationComponent {
+   @Input() housingLocation!: HousingLocation;
  }

変更してエラーも出なかったので大丈夫そうです。

エラーが起きて上手くいかない場合は、次のことが考えられます。

変更したコードが間違っている
変更箇所以外のコードも間違って削除してしまった

何か間違いがないか、今一度確認してみましょう。

そして、このAdd inputs to componentsはこれで終わりですね。
Inputデコレーターのこと何も分からない……
おそらく、これからどんどん使っていくことになると思うので、その時を待ちましょう。

これにてAdd inputs to componentsは完了です。

←　前へ　Angularの公式チュートリアルをやっていく　その５ - Create an interface
→　次へ　Angularの公式チュートリアルをやっていく　その７ - Add property binding to components

Input デコレーターをインポート

Discussion