ニュースアプリケーションを作成するためにAngular9に取り組んでいます。TimesofIndiaRSSFeedAPIを使用していますhttps://timesofindia.indiatimes.com
これが私のstackblitzリンクですhttps://stackblitz.com/github/mehulk05/Newsapp
ホームコンポーネントにカテゴリがあるので、カテゴリをクリックすると、サービスでそのカテゴリのニュースを取得してNewsListコンポーネントに表示しようとしていますが、カテゴリを変更すると、最新のデータを送信できません。サービスからnewsListコンポーネントへ。NewsServiceのコンソールで更新されたデータを取得していますが、newsListComponentでそのデータをフェッチできません。
これが私のコードです
Home.component.html
<div class="container mt-5">
<div class="col-xs-12">
<div class="row mt-4">
<div class="col-xs-3 col-md-3 sidelink">
<div class="list-group">
<a *ngFor="let c of categories"
class="list-group-item list-group-item-action"
id="list-home-list" [routerLink]=""
role="tab" aria-controls="home"
( (click)='onClick(c.url)'>{{c.type}}</a>
</div>
</div>
<div class="col-md-9 col-xs-9">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
Home.component.ts
export class HomeComponent implements OnInit {
categories=[
{type:"home",url:"https://timesofindia.indiatimes.com/rssfeedstopstories.cms?feedtype=sjson"},
{type:"recent",url:"https://timesofindia.indiatimes.com/rssfeeds/1221656.cms?feedtype=sjson"},
{type:"india",url:"https://timesofindia.indiatimes.com/rssfeeds/-2128936835.cms?feedtype=sjson"},
{type:"cricket",url:"https://timesofindia.indiatimes.com/rssfeeds/4719161.cms?feedtype=sjson"}]
constructor(private ns:NewsserviceService,
private router:Router) { }
ngOnInit(): void {
}
onClick(title){
console.log(title)
this.ns.getUrl(title)
this.router.navigate(["/news-list"])
}
}
NewsService.ts
export class NewsserviceService {
url:string='https://timesofindia.indiatimes.com/rssfeedstopstories.cms?feedtype=sjson'
constructor(private http:HttpClient) {
}
getUrl(url){
this.url=url
this.getNewsList();
}
getNewsList(){
this.url='https://cors-anywhere.herokuapp.com/'+this.url
console.log(this.url)
this.http.get(this.url ).subscribe(data=>{
console.log(data)
})
}
}
NewsList.component.ts
news:any
constructor(private ns:NewsserviceService,private cd:ChangeDetectorRef) { }
ngOnInit() {
this.news= this.ns.getNewsList();
console.log("news is" +this.news)
}
}
カテゴリをクリックすると、Newslistコンポーネントからコンソールで初めてデータを取得しますが、その後、newsListコンポーネントからデータを取得しませんが、Newserviceからコンソールでデータを取得します。
ここであなたがやろうとしていることがわかります
これでできることは、サービスでイベントエミッターを作成し、そのイベントをサービスデータとともにコンポーネント1からコンポーネント2に発行できることです。これを行う方法は次のとおりです。
Service.ts
SelectedUrlData=new EventEmitter();
getUrl(url){
this.url=url
this.getNewsList();
}
getNewsList() {
this.url = 'https://cors-anywhere.herokuapp.com/' + this.url
this.http.get<any[]>(this.url).subscribe(data => {
this.tohome = data
})
}
getData(): Observable<any> {
this.url='https://cors-anywhere.herokuapp.com/'+this.url
return this.http.get<any[]>(this.url);
}
Home.ts
@Input() newdata:any
ngOnInit(): void {
this.ns.getData().subscribe(data=>
{
console.log(data)
})
}
onClick(title){
this.ns.getUrl(title)
this.tohome=this.ns.tohome
this.ns.selectedurl.emit(this.tohome)
this.router.navigate(["/news-list"])
}
newslist.ts
news:any
ngOnInit() {
this.ns.getData().subscribe(data=>
{
console.log(data)
})
this.news = this.ns.getNewsList();
this.ns.selectedurl.subscribe(data => {
console.log(data)
})
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加