Angular 路由只是附加到 url 不去新页面

Question

我只是想 link 当我点击主页组件中的一个对象时，它会将我带到播放器详细信息组件。我发送的方法中所有数据都已正确发送，但它只是附加到 url 而不是实际转到新页面本身。

我也不知道我应该把它放在哪里，因为如果我在任何组件中都有它，它最终会不断尝试呈现播放器详细信息页面。

应用-routing.module

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { PlayerDetailComponent } from "./components/player-detail/player-detail.component";

const routes: Routes = [
  {
    path: "details/:playerID/:firstName/:lastName/:teamID",
    component: PlayerDetailComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我的home.component.ts

showDetails(
    playerID: String,
    firstName: String,
    lastName: String,
    teamID: String
  ) {
    this.router.navigate(["/details", playerID, firstName, lastName, teamID]);
  }

EDIT

我将应用程序路由更改为此

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./components/home/home.component";
import { PlayerDetailComponent } from "./components/player-detail/player-detail.component";

const routes: Routes = [
  {
    path: "",
    component: HomeComponent
  },
  {
    path: "details/:playerID/:firstName/:lastName/:teamID",
    component: PlayerDetailComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

我的应用程序组件 html 就是这个

<div class="main-container">
  <div>
    <router-outlet></router-outlet>
  </div>
</div>

这行得通，但我真的不明白为什么以及如果我想添加一个返回主页的按钮我现在该怎么做？

EDIT 2

我意识到如果我想返回主页，我只需要执行 '' 即可。

Answer 1

您通常会在 router-outlet 之外使用某种类型的导航来导航到不同的组件。您的所有组件都将在 router-outlet 中呈现，您可以使用导航导航到不同的功能。

此外，您可能不想使用路径参数传递所有玩家详细信息，而是使用 shared/central 服务来存储您的数据并让您的组件通过该服务访问该数据。一个例子是，当您转到播放器详细信息时，只需使用播放器 id 作为路径参数，然后从中央服务中提取播放器详细信息。

我整理了应用程序可能结构的 stackblitz 示例。

https://stackblitz.com/edit/angular-wm6pdm

Angular 路由只是附加到 url 不去新页面

Angular routing just appending to url not going to new page

typescript

angular-routing

angular