Я настроил следующее взаимодействие родительских и дочерних компонентов с помощью декоратора @Input. Но это не похоже на работу. Может кто-нибудь, пожалуйста, помогите мне с этим?
Родительский файл TS:
import { Component, OnInit } from '@angular/core';
import { Covid19Service } from '../services/get-covid19-data';
@Component({
selector: 'app-countries',
templateUrl: 'countries.component.html',
styleUrls: ['countries.component.css']
})
export class CountriesComponent implements OnInit {
constructor(private covid19Service: Covid19Service) { }
countries: Array<string> = [];
countriesCount: Number;
selectedCountry: string = 'Sample';
ngOnInit() {
this.covid19Service.getCountries().subscribe(data => {
this.countriesCount = data['affectedCountries'];
this.countries = data['countries'];
});
}
countrySelected(country: string) {
this.selectedCountry = country;
console.log(`Selected Country from Parent: ${this.selectedCountry}`);
/* console.log(`Clicked on : ${country}!`);
this.covid19Service.getCountry(country).subscribe(data => {
console.log(`${JSON.stringify(data)}`);
}); */
}
}
Родитель HTML:
<div>
<li *ngFor="let country of countries">
<span class="badge" (click)="countrySelected(country)">{{country}}</span>
</li>
</div>
<app-country [country]="selectedCountry"></app-country>
Дочерний файл ts:
import { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-country',
templateUrl: 'country.component.html',
styleUrls: ['country.component.css']
})
export class CountryComponent implements OnInit {
@Input() country: string;
ngOnInit() {
console.log(`Selected Country in Child: ${this.country}`);
}
}
Дочерний HTML-файл:
<p>Country component works!</p>
<p>This is the selected Country: {{country}}</p>
Приведенный выше код с использованием компонента @Input не работает. Может кто-нибудь помочь мне с этим? Я довольно новичок в Angular, и я потерян. Любая помощь будет оценена