Question

当我单击家庭组件中的某个对象时，我只是尝试链接，该对象将我带到播放器详细信息组件。我发送的方法中所有数据都正确发送，但是它只是追加到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 {}

我的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中，并且您可以使用导航键导航到其他功能。

此外，您可能不想使用路径参数传递所有玩家详细信息，而是使用共享/中央服务来存储数据，并让组件通过该服务访问该数据。例如，当您进入播放器详细信息时，只需将播放器id用作路径参数，然后从中央服务中提取该播放器详细信息即可。

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

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

角路由只是追加到URL，不会转到新页面

1 个答案: