有人可以在这里帮我吗，无法让路由正常工作，继续收到 404

Question

我正在尝试通过父组件路由子组件，以便在单击父组件内的链接时子组件显示在父组件上。

我尝试按照角度路由教程https://angular.io/guide/router 进行操作，但我无法让它工作，我还尝试了堆栈溢出的方法： angular 4 - routing within a component(child routes) not working properly

更新：

1. 我在 stackblitz 上添加了一个版本，这是链接：https://stackblitz.com/edit/angular-ksfrpn

2. 我尝试过更改路由，例如{ path: 'dashboard' component: DashboardComponent } to { path: "" component: DashboardComponent }，我可以显示仪表板，但我想要的是在仪表板组件中显示 One 组件。

3. 当我尝试访问“一个组件”时收到 404，基本上我是在尝试创建 url 路径“application/home”作为基础，当单击仪表板时你会得到“应用程序/dashboard”之后，用户可以在仪表板上单击“one”并转到“application/dashboard/one”，其中将显示一个组件。

app.module

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AppRoutingModule } from './app-routing.module';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { DashboardModule } from './dashboard/dashboard.module';


@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpModule,
    DashboardModule,
    AppRoutingModule,


  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas:      [ NO_ERRORS_SCHEMA ]
})
export class AppModule { }

应用路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from "./home/home.component";
import { PageNotFoundComponent } from "./page-not-found/page-not-found.component";

const routes: Routes = [
  { path: '', redirectTo: "dashboard", pathMatch: 'full' },
  { 
    path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(mod => mod.DashboardModule),
    data: {preload: true}
  },
  { path: 'home', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }

];

@NgModule({
  imports: [    RouterModule.forRoot(
    routes,
    { enableTracing: true } // <-- debugging purposes only
  )],
  exports: [RouterModule]
})
export class AppRoutingModule { }

dashboard.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from "./dashboard.component";
import { RouterModule } from "@angular/router";
import { DashboardRoutingModule } from './dashboard-routing.module';
import { OneComponent } from "./one/one.component";



@NgModule({
  declarations: [
    DashboardComponent,
    OneComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    DashboardRoutingModule,

  ]
})
export class DashboardModule { }

dashboard-routing.module

import { NgModule, Component } from '@angular/core';
import { Route, RouterModule } from '@angular/router';
import { OneComponent } from "./one/one.component";
import { DashboardComponent } from "./dashboard.component";

const dashBoardRoutes : Route[] = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    pathMatch: 'full',
    children: [
      {
        path: 'one',
        component: OneComponent
      }    
    ]

  }
];

@NgModule({
  imports: [
    RouterModule.forChild(dashBoardRoutes)
  ],
  exports: [RouterModule]
})
export class DashboardRoutingModule { }

链接

<links>
    <ul>
        <li>
            <a routerLink="/home">Home<span class="sr-only">Home</a>
        </li>
        <li>
            <a routerLink="/dashboard">Dashboard</a>
        </li>

    </ul>
</links>

我要做的是在仪表板组件中显示“一个组件”。

Answer 1

从 dashBoardRoutes 中删除 pathMatch: 'full' 即可。

在此处获取有关 patchMatch 的更多详细信息：https://angular.io/api/router/Route

Answer 2

从您在问题中包含的内容来看，您似乎链接到了错误的路线路径。 您正在为DashboardModule 使用延迟加载：您在AppRoutingModule 中定义了dashboard 路由，并在此处使用loadChildren 延迟加载DashboardModule。

然后，在DashboardRoutingModule 中放置另一个 路径，路径为dashboard。 要到达这条路线，您需要将来自AppRoutingModule (dashboard) 的前缀路径加上来自实际路线的路径（也是dashbaord）。 结果是 dashbaord/dashboard - 请尝试使用您的 RouterLink 链接到此路径。

如果你希望这条路径只是dashboard，你需要改变你的路由路径。 AppRoutingModule 中的那个必须保持原样，但您可以只为叶路由提供一个空路径：

{ path:  '', component: DashboardComponent }

希望这会有所帮助！对于您的下一个问题，请提供一些附加信息：

• 什么不起作用？是否有任何错误消息？
• 你试过什么效果？
• StackBlitz 项目中的最小复制将很棒！