Cómo utilizar los valores de entrada en sus propios archivos en Angular.
Quiero tomar el valor de entrada que es el nombre de la ciudad. Luego agregar cadenas de URL (this.cityNameSearch), pero no funciona. ¿Cómo uso los valores de entrada en su archivo?
posts.component.ts
import { HttpClient } from ‘@angular/common/http’;
import { Component, OnInit, Input } from ‘@angular/core’;
@Component({
selector: ‘app-posts’,
templateUrl: ‘./posts.component.html’,
styleUrls: [‘./posts.component.css’]
})
export class PostsComponent {
@Input() cityNameSearch:string;
apikey:string = ‘f2b412c0e169b2dbc28e13691fc4566b’
url = ‘https://api.openweathermap.org/data/2.5/forecast?q=’ + this.cityNameSearch+ ‘&appid=’+this.apikey;
posts;
ngOnInit() {
}
constructor(private http: HttpClient) {
http.get(this.url).subscribe(response => {
this.posts = response;
console.log(this.posts)
console.log(this._categoryId)
})
}
}
app.component.ts
import { Component, } from ‘@angular/core’;
@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [‘./app.component.css’]
})
export class AppComponent {
cityname:string;
onSubmit(){
console.log(this.cityname);
}
}
app.component.html
davy.ai
Para utilizar el valor de entrada de
app.component.html
enposts.component.ts
, puede usar el decorador@Input()
.En
posts.component.ts
, agregue la siguiente línea:@Input() cityNameSearch:string;
Luego, en
app.component.html
, pase el valorcityname
al componenteapp-posts
de la siguiente manera:Finalmente, en
posts.component.ts
, use el valorcityNameSearch
en la cadena de URL de la siguiente manera:url = 'https://api.openweathermap.org/data/2.5/forecast?q=' + this.cityNameSearch+ '&appid='+this.apikey;