Angular 角度路由只是附加到url而不是新页面

我只是尝试链接，当我点击我的主页组件中的一个对象时，它会将我带到播放器细节组件。我使用正确发送的所有数据发送方法，但它只是附加到url，而不是实际转到新页面本身

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

app-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 {}

我的家

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

编辑

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

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>

这是可行的，但我真的不明白为什么，如果我想在主页上添加一个按钮，我现在该怎么做

编辑2

---

我意识到，如果我想返回主页，我只需执行“”。

您通常在

路由器出口之外有某种类型的导航来导航到不同的组件。所有组件都将在
路由器出口中呈现
，您可以使用导航导航到不同的功能

此外，您可能不希望使用path参数传递所有播放机详细信息，而是使用共享/中心服务存储数据，并允许组件通过该服务访问该数据。例如，当您转到播放器详细信息时，只需使用播放器
id
作为路径参数，然后从中央服务中提取该播放器详细信息

我为应用程序提供了一个可能的结构的stackblitz示例


您通常在
路由器出口之外有某种类型的导航来导航到不同的组件。所有组件都将在
路由器出口中呈现
，您可以使用导航导航到不同的功能

此外，您可能不希望使用path参数传递所有播放机详细信息，而是使用共享/中心服务存储数据，并允许组件通过该服务访问该数据。例如，当您转到播放器详细信息时，只需使用播放器
id
作为路径参数，然后从中央服务中提取该播放器详细信息

我为应用程序提供了一个可能的结构的stackblitz示例


以stackblitz的形式发布一个完整的最小示例。我猜你的模板中没有路由器插座。我在app.component.html中放了一个路由器插座，它只会将玩家详细信息组件放在主页的顶部，如果我将路由器插座放在我的玩家详细信息中，它仍然会做同样的事情。app.component.html始终显示。如果希望此模板的某些部分仅显示在主页中，则该部分应位于单独的主页组件中，主页组件应为主页路由的组件，并映射到空路径。您可以使用
home
。你读过angular.io指南中关于路由的内容吗？我读过，我只是对路由器出口应该放在哪里感到困惑，我举了一个完整的最小示例作为stackblitz。我猜你的模板中没有路由器插座。我在app.component.html中放了一个路由器插座，它只会将玩家详细信息组件放在主页的顶部，如果我将路由器插座放在我的玩家详细信息中，它仍然会做同样的事情。app.component.html始终显示。如果希望此模板的某些部分仅显示在主页中，则该部分应位于单独的主页组件中，主页组件应为主页路由的组件，并映射到空路径。您可以使用
home
。你读过angular.io指南中关于路由的内容吗？我读过。我只是不知道路由器插座应该放在哪里。这肯定有助于消除一些困惑。谢谢。@joe_monaco98没问题。如果你有任何问题，请告诉我。这肯定有助于澄清一些困惑，谢谢。@joe_monaco98没问题。如果你有任何问题，请告诉我。