未从服务获取更新的数据到我的组件中的角度

Question

我正在研究angular 9以进行新闻应用。我正在使用印度时报RSS Feed API https://timesofindia.indiatimes.com

这是我的stackblitz链接https://stackblitz.com/github/mehulk05/Newsapp

我的家庭组件中有类别，因此，当我单击任何类别时，我会在服务中获取该类别的新闻，并尝试在NewsList Component中显示它。但是当我更改类别时，无法以某种方式发送从服务到newsList Component的最新数据。尽管我正在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中获得了控制台中的数据

Answer 1

您的代码示例距离工作还很长。您的主要问题是您没有从服务中返回数据。

我不会为您编写应用程序，但是我可以演示如何从服务中返回数据。

1. 不订阅您的服务-返回可观察的内容

service.ts

getData(): Observable<any> {
  return this.http.get(this.url);
}

2. 订阅您组件中的服务

component.ts

ngOnInit() {
 this.service.getData().subscribe(data => {
    this.data = data;
  });
}

3. 绑定到HTML中的数据

component.html

<ng-container *ngIf="data">
  <div *ngFor="let item of data">
    {{item}}
  </div>
</ng-container>

我希望这演示了将数据从服务中获取到组件所需要的简单方法。

替代方法是使用异步管道。您更喜欢见解。无论哪种方式，您仍然需要从服务中返回可观察到的值。

Answer 2

仅获取对ViewChild的引用，然后直接调用其方法之一。

@Component({
 selector: 'app-child'
})
export class ChildComponent {

 notifyMe() {
 console.log('Event Fired');
 }
}

@Component({
 selector: 'app-parent',
 template: `<app-child #child></app-child>`
})
export class ParentComponent {

@ViewChild('child')
private child: ChildComponent;

ngOnInit() {
this.child.notifyMe();
}
}

或使用eventEmmiter。选中此post