角度嵌套路由和提取数据

Question

说明：我很新，尝试让我的头在某些方面，所以任何帮助将不胜感激！ :)

摘要

• 我的项目（/项目）列表
• 当我点击一个项目，它定位到与URL变化，包括项目ID的项目总结（项目/ 5）
• 在此页面我有一个按钮来查看与此项目相关的所有问题（/ projects/5/issues）
• 项目正在从一个JSON文件读取，问题正在从另一个JSON读取文件
个
• 的项目出现细，项目总结会出现细微的问题页面不
• 当加载问题页面，它正确地定位到（/项目/ 5 /问题）
• 然而，这里显示了所有来自JSON文件的问题，而不是与项目ID＃5相关的问题。
• 我相信这肯定是由于我将数据提取回来而不是过滤它的方式。

问题

1. 当一个项目点击，然后被提出的项目汇总页面，然后单击“查看问题”按钮，怎么办匹配项目ID，我才存在的问题？

我的问题服务

import { Injectable } from '@angular/core'; 
 
import { Http, Response } from '@angular/http'; 
 

 
import { Observable } from 'rxjs/Observable'; 
 
import 'rxjs/add/operator/do'; 
 
import 'rxjs/add/operator/catch'; 
 
import 'rxjs/add/operator/map'; 
 
import 'rxjs/add/observable/throw'; 
 

 
import { IIssues } from './issues.interface'; 
 

 
@Injectable() 
 
export class IssuesService { 
 

 
    private _issuesURL = 'assets/issues-list.json'; 
 

 
    constructor(private _http: Http) { } 
 

 
    getIssues(): Observable<IIssues[]> { 
 
     return this._http.get(this._issuesURL) 
 
      .map((response: Response) => <IIssues[]> response.json()) 
 
      .do(data => console.log('All: ' + JSON.stringify(data))) 
 
      .catch(this.handleError); 
 
    } 
 

 
    getIssue(id: number): Observable<IIssues> { 
 
     return this.getIssues() 
 
      .map((issues: IIssues[]) => issues.find(p => p.projectId === id)); 
 
    } 
 

 
    private handleError(error: Response) { 
 
     console.error(error); 
 
     return Observable.throw(error.json().error || 'Server error'); 
 
    } 
 
}

发行组件TS

import { Component, OnInit, OnDestroy } from '@angular/core'; 
 
import { Router, ActivatedRoute } from '@angular/router'; 
 

 
import { Subscription }  from 'rxjs/Subscription'; 
 

 
import { IIssues } from './issues.interface'; 
 
import { IssuesService } from './issues.service'; 
 

 

 
@Component({ 
 
    moduleId: module.id, 
 
    templateUrl: 'issues-list.component.html', 
 
}) 
 
export class IssuesListComponent implements OnInit, OnDestroy { 
 
    pageTitle: string = 'Issues List'; 
 
    issues: IIssues; 
 
    errorMessage: string; 
 
    private sub: Subscription; 
 

 
    constructor(private _route: ActivatedRoute, 
 
       private _router: Router, 
 
       private _issuesService: IssuesService) { 
 
    } 
 

 
    ngOnInit(): void { 
 
     this.sub = this._route.params.subscribe(
 
      params => { 
 
       let projectId = +params['id']; 
 
       this.getIssue(projectId); 
 
     }); 
 
    } 
 

 
    ngOnDestroy() { 
 
     this.sub.unsubscribe(); 
 
    } 
 

 
    getIssue(id: number) { 
 
     this._issuesService.getIssue(id).subscribe(
 
      issues => this.issues = issues, 
 
      error => this.errorMessage = <any>error); 
 
    } 
 
}

我的问题JSON文件 我认为包括projectID在这里是必不可少的，只是不完全确定如何使用它。

[ 
 
    { 
 
     "projectId": 1, 
 
     "projectName": "Project X", 
 
     "issueId": 11, 
 
     "issueName": "Project X Issue" 
 
     } 
 
      { 
 
     "projectId": 1, 
 
     "projectName": "Project X", 
 
     "issueId": 12, 
 
     "issueName": "Project X-X Issue" 
 
     } 
 
]

我的项目总结组件页面上的链接

<a [routerLink]="['/projects', projects.projectId, 'issues']"> View Issues </a>

问题组件的HTML

<h2> {{ pageTitle }} </h2> 
 

 
<ul *ngIf='issues'> 
 
    <li *ngFor='let issue of issues'> 
 
     <ul> 
 
      <li> <strong> Issue ID: </strong> {{ issue.issueId }} </li> 
 
      <li> <strong> Project ID: </strong> {{ issue.projectId }} </li> 
 
      <li> <strong> Issue Name: </strong> {{ issue.issueName }} </li> 
 
      <li> <strong> Project ID: </strong> {{ issue.projectName }} </li> 
 
     </ul> 
 
    </li> 
 
</ul>

Answer 1

通过调用所有的ID参数 “ID” 的......我觉得他们可能得到的地方混淆。我建议你首先将所有期望项目ID的参数命名为projectId，并将那些期望问题的参数命名为issueId。

看看你的服务，它看起来像getIssue期待一个projectId。但是，看起来问题组件是通过issueId？