Angularの公式チュートリアルをやっていく その８ - Add dynamic values to templates
Angularの公式チュートリアル「はじめての Angularアプリ」を進めていきます。
一覧
Angularの公式チュートリアルをやっていく その１ - Introduction
Angularの公式チュートリアルをやっていく その２ - Hello world
Angularの公式チュートリアルをやっていく その３ - Create home component
Angularの公式チュートリアルをやっていく その４ - Create housing location component
Angularの公式チュートリアルをやっていく その５ - Create an interface
Angularの公式チュートリアルをやっていく その６ - Add inputs to components
Angularの公式チュートリアルをやっていく その７ - Add property binding to components
Angularの公式チュートリアルをやっていく その８ - Add dynamic values to templates
Angularの公式チュートリアルをやっていく その９ - Use *ngFor in templates
Angularの公式チュートリアルをやっていく その１０ - Angular services
Angularの公式チュートリアルをやっていく その１１ - Add routing
Angularの公式チュートリアルをやっていく その１２ - Customize the details page
Angularの公式チュートリアルをやっていく その１３ - Integrate Angular forms
Angularの公式チュートリアルをやっていく その１４ - Add search functionality
Angularの公式チュートリアルをやっていく その１５ - Add HTTP communication
今回やるのは、↓の部分です。
HousingLocationComponentのテンプレートを更新して補間値を含める(Update HousingLocationComponent template to include iterpolated values)
housing-location.component.tsのtemplateを更新して、ハウスロケーションのカードコンポーネントをデザインします。
下記のようにhousing-location.component.tsを更新しましょう。
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> `,
+ template: `
+ <section class="listing">
+ <img class="listing-photo" [src]="housingLocation.photo" alt="Exterior photo of {{housingLocation.name}}">
+ <h2 class="listing-heading">{{ housingLocation.name }}</h2>
+ <p class="listing-location">{{ housingLocation.city}}, {{housingLocation.state }}</p>
+ </section>
+ `,
styleUrls: ['./housing-location.component.css'],
})
export class HousingLocationComponent {
@Input() housingLocation!: HousingLocation;
}
そうすると、Inputデコレーターの力で、HomeComponentで宣言されたhousingLocationプロパティのデータが<app-housing-location>タグの[属性]="値"を経由して、HousingLocationComponentのhousingLocation``プロパティに格納されます。
そしてそのデータを、templateで使用することになります。
更新後ファイルを保存したら、ブラウザを表示させます。
おや、画像が表示されていませんね。
他の部分は大丈夫そうですが。
原因は恐らく、home.component.tsファイルの下記の部分
photo: 'assets/example-hous.jpg',
ブラウザにはここで指定された画像が表示されるハズなのですが、何という事でしょう、assetsフォルダには該当の画像ファイルが存在しません！
色々探してみたのですが、どうやらサンプルの家の画像は提供してくれていないみたいです。
これは自分で用意するしかないですね。
私の場合は、このサイトで「家」と調べて適当な画像を持ってきて、assetsフォルダにファイル名を変えて保存しました。
そして最後ブラウザを表示。
お、上手くいきましたね。
変化しなかったり、エラーが起きて上手くいかない場合は、次のことが考えられます。
- 変更したファイルを保存していない
- 変更したコードが間違っている
- 変更箇所以外のコードも間違って削除してしまった
何か間違いがないか、今一度確認してみましょう。
これでなんとなく、Inputデコレーターを使った親コンポーネント→子コンポーネントのデータの受け渡しが分かりました。
これにてAdd dynamic values to templatesは完了です。
← 前へ Angularの公式チュートリアルをやっていく その７ - Add property binding to components
→ 次へ Angularの公式チュートリアルをやっていく その９ - Use *ngFor in templates
Discussion