有人可以帮我解决这个问题，路由无法正常工作，不断收到 404

Question

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

我尝试按照 angular 路由教程 https://angular.io/guide/router 但是我无法让它工作，我也尝试了堆栈溢出的方法：

更新：

我在 stackblitz 添加了一个版本，这里是 link：https://stackblitz.com/edit/angular-ksfrpn
我试过更改路由，例如{ path: 'dashboard' component: DashboardComponent } 到 { path: "" component: DashboardComponent }，我可以显示仪表板，但我想要的是在仪表板组件中显示一个组件。
当我尝试到达 "one component" 时收到 404，基本上我正在尝试创建 url 路径 "application/home" 作为基础当单击仪表板时，您会看到 "application/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 { }

仪表板-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>

我想要做的是在仪表板组件中显示 'one component'。

Answer 1

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

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

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

{ path:  '', component: DashboardComponent }

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

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

Answer 2

从 dashBoardRoutes 中删除 pathMatch: 'full' 它将起作用。

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

有人可以帮我解决这个问题，路由无法正常工作，不断收到 404

Can someone help me out here, can't get the routing to work properly, keep getting 404

angular-routing

angular