让 "view more detail" 工作在 Angular 2/4

Question

我在 Angular 应用程序中使用 "view more detail" 功能时遇到问题。这很简单，但我无法获得我点击的某个新闻的详细信息的价值。它是这样工作的，首先，您有一个新闻列表，每个新闻都有一个 "view" 按钮，可以将您重定向到一个新页面。如何显示某条新闻的详情值？问题在新闻上-detail.component.ts

news.service.ts

@Injectable()
export class NewsService {
    constructor(private httpClient: HttpClient) {
  }

getAllNews() {
    const authToken = localStorage.getItem('auth_token'); 
    const headers = new HttpHeaders() 
    .set('Content-Type', 'application/json') 
    .set('Authorization', `Bearer ${authToken}`);

    return this.httpClient
      .get('http://sample/news/', { headers: headers })
      .map(
        (response => response));
}


getNews(index: number) {

  }

}

新闻-list.component.ts

<div class="card" *ngFor="let newslist of newslists">
    <div class="card-header"> <button class=" btn btn-danger pull-right" style="cursor: pointer;" (click)="onViewNewsDetail(newslist.id)">View</button> 
        {{newslist.category}}          
    </div>
    <div class="card-body">
        {{newslist.title}}   
    </div>
  </div>

新闻-list.component.ts

export class NewsListComponent implements OnInit {
  newslists: any;
  constructor(private newsService: NewsService, private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {

    this.newsService.getAllNews()
      .subscribe(
        (data:any) => {
          console.log(data);
          this.newslists = data.data.data;
          console.log(this.newslists);
        },
        error => {
          alert("ERROR");
        });
  }

  onViewNewsDetail(id: number){
    console.log(id);
    this.router.navigate(['news', id]);
  }

}

新闻-detail.component.ts

    export class NewsDetailComponent implements OnInit {
    id: number;
    news: number;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private newsService: NewsService) { }

    ngOnInit() {
      this.route.params
        .subscribe((params: Params) => {
          this.id = +params['id'];
          // this.news = this.newsService.getNews(this.id);
        });
    }      
}

Answer 1

你有没有像 { path: 'news/:id', component: news-detail.component } 这样的路由？

Answer 2

如果您没有获取单篇新闻文章的端点，那么这样的方法也许适合您。

服务

getNews(id: number) {
  return this.getAllNews().map((data: any) => data.data.data.find(news => news.id === id))
}

新闻-detail.component.ts

ngOnInit() {
  this.route.params
    .subscribe((params: Params) => {
       this.id = +params['id'];
       this.newsService.getNews(this.id)
         .subscribe(news => this.news = news)
  });
}

让 "view more detail" 工作在 Angular 2/4

Make "view more detail" work in Angular 2/4

angular

angular2-services

angular2-http