角度 2 - 加载路由组件，然后返回到上一个组件

Question

我对 Angular 2 路由有问题。当我单击我的链接以获取团队详细信息时，它会采用正确的路线并加载指定的组件(TeamComponent)。但是，立即"返回"上一个组件(TeamsComponent)，即团队列表。

这是我的项目结构：

/app
|_shared
|_team
|_team.component.css
|_team.component.html
|_team.component.ts
|_team.model.ts
|_team.service.ts
|_team-list
|_team-list.component.css
|_team-list.component.html
|_team-list.component.ts
|_teams
|_teams.component.css
|_teams.component.html
|_teams.component.ts
|_teams.module.ts
|_teams-routing.module.ts

首先，我在teams-routeting.module.ts上设置路由：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TeamsComponent } from './teams.component';
import { TeamComponent } from '../shared/team/team.component';
const teamsRoutes: Routes = [
{
path: 'team/:id',
component: TeamComponent
},{
path: 'teams',
component: TeamsComponent
}
];
@NgModule({
imports: [
RouterModule.forChild(teamsRoutes)
]
})
export class TeamsRoutingModule { }

从teams.component.ts上的 teamService 加载团队列表，并将其发送到teams.component.html上的 team-list：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/from';
import { TeamService } from '../shared/team/team.service';
import { Team } from '../shared/team/team.model';
@Component({
selector: 'app-teams',
templateUrl: './teams.component.html',
styleUrls: ['./teams.component.css']
})
export class TeamsComponent implements OnInit {
teamList: Team[] = [];
constructor(private teamService: TeamService) { }
ngOnInit() {
this.teamService.getTeams().subscribe(teams => {
Observable.from(teams).subscribe(team => {
this.teamList.push(team);
});
});
}
}

团队组件.html

<section class="teams">
<app-team-list [teams]="teamList"></app-team-list>
</section>

然后，使用我的团队列表，我在team-list.component.html上设置HTML列表：

<section *ngFor="let team of teams" class="team_list">
<div class="card" style="width: 20rem;">
<img class="card-img-top" src="/assets/logos/{{team.logo}}" alt="Team Logo">
<div class="card-block">
<h4 class="card-title">{{team.name}}</h4>
<p class="card-text">{{team.location}}</p>
<a routerLink="/team/{{team.id}}" class="btn btn-primary">Team Info</a>
</div>
</div>
</section>

最后，我从参数"id"和team.component.ts中的服务中获取团队信息：

import { Component, Input, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { Team } from './team.model';
import { TeamService } from "./team.service";
import 'rxjs/add/operator/switchMap';
@Component({
selector: 'app-team',
templateUrl: './team.component.html',
styleUrls: ['./team.component.css']
})
export class TeamComponent implements OnInit {
team: Team = null;
constructor(private teamService: TeamService,
private activatedRoute: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
let teamId: number = this.activatedRoute.snapshot.params['id'];
console.log("Vamos a buscar el equipo");
this.teamService.getTeamById(teamId).subscribe(team => this.team = team);
}

}

它使用团队数据加载 TeamComponent HTML，但返回到/teams 方向(并且不打印团队列表)。我尝试更改路由名称(例如/detail/：id)，但仍然不起作用。有什么建议吗？提前谢谢。

Answer 1

好的，知道了。您的请求将是异步的，因此在创建组件时，团队为空。我认为您的团队组件中有这样的绑定：

{{ team.name }}

如果团队为空，则无法访问名称并崩溃。为了确保 html 呈现时没有错误，请使用如下所示的 elvis 运算符：

{{ team?.name }}

仅当团队不为 null 或未定义时，这将仅访问名称

Answer 2

更新：getTeamById 服务

getTeamById(id: number): Observable<Team> {
let team: Team = null;
return this.http.get(this.urlTeams+'/'+id)
.map(response => {
let dbTeam: any = response.json();
for(let i in dbTeam) {
team = new Team(dbTeam[i].teamId,dbTeam[i].teamName,dbTeam[i].teamLocation,dbTeam[i].teamFoundation,dbTeam[i].teamDivision,dbTeam[i].teamConference,dbTeam[i].teamStadium,dbTeam[i].teamAttendance,dbTeam[i].teamLogo,dbTeam[i].teamStadiumPhoto);
}
return team;
})
.catch(this.handleError);
}