ngForのオブジェクトからIDを取得してデータベースのID検索に使用する方法（角度）？

Question

データベースから取得した記事のウェブページがあり、 に配列を入れてngForを使用して表示しています。各記事には、 の[詳細を表示]ボタンがあります。そのボタンをクリックしてから をクリックして/articles/{articleId}に移動します。私は をクリックしてその記事のIDを取得しようとしています（詳細は をクリックしてください）。しかし、ボタンをクリックすると、そのIDを で取得する方法はわかりません。私はInputと を親から子へデータを渡すのを見ましたが、ngForを使うときには をどうやって使うのか分かりません。あるいは、データを渡す考えは でも良い方法です.MYのアイデアは、現在のIDを取得し、その後、その後、記事について すべてのデータを取得し、その 子コンポーネントにその記事を表示するには、私のfindById機能を使用して子コンポーネント（/article/{articleId}

子供に を渡すことです成分：

import {Component, OnInit} from "@angular/core"; 
import {Article} from "../article.model"; 
import {ArticlesService} from "../articles.service"; 
import {ActivatedRoute, Params} from "@angular/router"; 

@Component({ 
    selector: 'app-view-articles', 
    templateUrl: './view-articles.component.html' 
}) 
export class ViewArticlesComponent implements OnInit { 
    article: Article; 
    id: string; 

    constructor(private route: ActivatedRoute, private articleService: ArticlesService) { } 

    // this is where I would used the passed id to pass into findArticle but an id is hardcoded in right now 
    ngOnInit() { 
    this.articleService.findArticle("59dcba5fae3c751b45665ca7") 
     .subscribe(
      (article: Article) => { 
       this.article = article; 
      } 
     ); 
    } 

} 

（子コンポーネントから呼び出さ）

条サービスfindArticle機能

findArticle(id: string) { 
    return this.http.get('http://localhost:3000/article/' + id) 
     .map((response: Response) => { 
      const article = response.json().obj; 
      let transformedArticle: Article = new Article(article.author, article.title, article.body, article._id); 
      return transformedArticle; 
     }) 
     .catch((error: Response) => { 
      this.errorService.handleError(error.json()); 
      return Observable.throw(error.json()); 
     }); 
    } 

親コンポーネント

import { Component, OnInit } from '@angular/core'; 
import {ArticlesService} from "./articles.service"; 
import {Article} from "./article.model"; 

@Component({ 
    selector: 'app-articles', 
    templateUrl: './articles.component.html', 
    styleUrls: ['./articles.component.css'] 
}) 
export class ArticlesComponent implements OnInit { 
    articles: Article[]; 

    constructor(private articleService: ArticlesService) { } 

    ngOnInit() { 
    this.articleService.getArticles() 
     .subscribe(
      (articles: Article[]) => { 
       this.articles = articles; 
      } 
     ); 
    } 

} 

親HTML

<div class="row"> 
    <!--/span--> 
    <div class="col-6 col-sm-6 col-lg-4" 
     *ngFor="let article of articles"> 
    <h2>{{article.title}}</h2> 
    <h4>By: {{article.author}}</h4> 
    <p>{{article.body}}</p> 
    <p><a class="btn btn-default" href="#">View details »</a></p> 
    </div> 
</div> 

Answer 1

たとえば、ルータリンクを使用できます。

と

<div class="row"> 
    <!--/span--> 
    <div class="col-6 col-sm-6 col-lg-4" 
     *ngFor="let article of articles"> 
    <h2>{{article.title}}</h2> 
    <h4>By: {{article.author}}</h4> 
    <p>{{article.body}}</p> 
    <p><a class="btn btn-default" [routerLink]="['/articles',article.id]">View details »</a></p> 
    </div> 

たり、関数を作成prefare場合..

goToArticleDetails(id) { 
    this.router.navigate(['/articles', id]); 
} 

Answer 2

記事のページ：

<a class="btn btn-default" (click)="viewDetails(article.id)">View details</a> 

import { Router } from '@angular/router'; 

viewDetails(_id){ 
    this.router.navigate(['/article/'], { queryParams: { id: _id } }); 
} 

記事のページ：

import {Router, ActivatedRoute, Params} from '@angular/router'; 
import {OnInit, Component} from '@angular/core'; 
import {ArticlesService} from "./articles.service"; 
import {Article} from "./article.model"; 

@Component({...}) 
export class ArticleComponent implements OnInit { 
    article: Article; 
    constructor(private activatedRoute: ActivatedRoute) {} 

    ngOnInit() { 
    this.activatedRoute.params.subscribe((params: Params) => { 
     let id = params['id']; 
      this.articleService.findArticle(id).subscribe(
       (article: Article) => this.article = article; 
      ); 
     }); 
    } 

}