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

Question

我的 Angular 2 路由有问题。当我单击 link 以获取团队详细信息时，它采用正确的路径并加载指定的组件 (TeamComponent)。但是，立即 "gets back" 到上一个组件 (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-routing.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[=41= 上的团队列表]:

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);
      });
    });
  }

}

teams.component.html

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

然后，在我的团队列表中，我将 HTML 列表设置为 team-list.component.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

更新：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);
  }

Answer 2

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

{{ team.name }}

如果团队为空，则无法访问名称并崩溃。为确保 html 将无误地呈现，请像这样使用 elvis-operator：

{{ team?.name }}

如果团队不为空或未定义，这将仅访问名称