Angular 有人能帮帮我吗；不要让路由正常工作，继续使用404

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

我曾尝试遵循角度布线教程，但无法使其正常工作，我还尝试了堆栈溢出的方法：

更新：

我在stackblitz上添加了一个版本，链接如下：

我已尝试将路由更改为{path:“dashboard”组件：DashboardComponent}到{path:“component:DashboardComponent}，我可以显示仪表板，但我想要的是显示仪表板组件中的一个组件

当我尝试访问“一个组件”时，我得到了404，基本上我尝试创建url路径“application/home”作为基础，当单击仪表板时，您会在仪表板上获得“application/dashboard”，然后用户可以单击“one”，并被带到“application/dashboard/one”，其中显示一个组件

应用程序模块

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

仪表板布线模块

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

链接

家乡


仪表板

---

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

根据您在问题中包含的内容，看起来您链接到了错误的路径。 您正在对

仪表板模块使用延迟加载

：您在

批准模块

中定义了

仪表板

路由，并在此处使用

加载子项

延迟加载

仪表板模块

然后，在

仪表板布线模块

中，使用路径

仪表板

放置另一条布线。 要达到此路线，您需要将来自

批准模块

（

仪表板

）的前缀路径与来自实际路线的路径（也是

dashbaord

）相结合。 结果是

dashbaord/dashboard

–请尝试使用RouterLink链接到此路径

如果希望此路径仅为

仪表板

，则需要更改路由路径。

AppRoutingModule

中的路径必须保持原样，但您可以只为叶路由提供一个空路径：

{ path:  '', component: DashboardComponent }

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

• 什么不起作用？是否有任何错误消息
• 你试过什么效果
• 在StackBlitz项目中进行最小限度的复制将非常棒

从仪表板路由中删除路径匹配：“已满”，它将正常工作

---

在此处获取patchMatch的更多详细信息：

我进行了更改并添加了堆栈上的复制blitz，不幸的是，当我尝试转到仪表板中所需的组件时，我遇到了404错误。这是链接。我也更新了这个问题。非常感谢你的指点，谢谢！！它工作了，我现在明白了，它看起来像是直接路由到组件，即“应用程序/一”，而不是“应用程序/仪表板/一”

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

    </ul>
</links>

{ path:  '', component: DashboardComponent }