Angular mat-menu-item routerLink返回404文件未找到错误

我正在Visual Studio 2019中使用Angular 12项目(仍然是Angular的新手)。我试图改变一个垫子菜单项导航到一个新的组件，我得到一个失败的加载资源错误。

该项目目前有路由到一个组件，在本文中我已将其重命名为Parent。它存在于:ClientApp/src/app/parent。即使使用我所展示的简化代码，代码也相当简单。

在我的parent.component.ts文件中:

import { Component} from '@angular/core';
@Component({
selector: 'parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
constructor( ) {  }
}

parent.module.ts文件:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentComponent } from "./parent.component";
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'parent',
component: ParentComponent,
}])
],
declarations: [
....
ParentComponent
]
})
export class ParentModule {}

在app.module.ts中(暂时忽略CustomerModule):

In my app.module.ts
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
.......
import { ParentModule } from "./parent/parent.module";
import { CustomerModule } from "./parent/customer/customer.module";
@NgModule({
declarations: [
AppComponent,
.....    
],
imports: [
......
ParentModule,
CustomerModule
],
bootstrap: [AppComponent]
})
export class AppModule {}

我的app.component.html引用了一个导航组件，它包含

<button mat-menu-item [routerLink]="['/parent']">The Parent</button>

这一切都很好，我得到了导航到parent。我应该补充一点，ParentModule只在我上面指出的文件中被引用。然后，我在父组件下添加了一个客户组件，并将routerLink更改为

<button mat-menu-item [routerLink]="['/parent/customer']">The Customer</button>

但是这会产生404错误:加载资源失败:服务器响应404(未找到)的状态。将routeLink更改为[routerLink]="['/customer']">会产生同样的错误。

客户在app.module中。t，见前面。下面是customer.component.ts文件的代码(不显示html文件)::

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'customer',
templateUrl: './customer.component.html'
})
export class CustomerComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

对于customer.module.ts文件:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { CustomerComponent } from "./customer.component";
@NgModule({
declarations: [CustomerComponent],
imports: [
RouterModule.forChild(
[
{
path: 'customer',
component: CustomerComponent
}]
)
]
})
export class CustomerModule { }

但是，正如我所说的，当点击链接时，这不会路由，我只在浏览器窗口中得到404错误，并且VS19输出窗口也表示相同。我错过了什么导致这个错误?事先感谢您的帮助。

编辑——我做了三件事，使我能够做一些事情，接近我想做的事情:

将我的客户组件文件夹放置在父组件文件夹中
删除app.module.ts中的CustomerModule文件及其引用。
在父模块中添加以下内容:

import { CustomerComponent } from "./parent/customer.component";
....
imports: [
RouterModule.forChild([
{
path: 'parent',
component: ParentComponent,
},
{
path: 'parent/customer',
component: CustomerComponent,
}])
],

在你的parent.module.ts中:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ParentComponent } from "./parent.component";
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'parent',
component: ParentComponent,
children: [
{
path:'customer', component: CustomerComponent
},
}])
],
declarations: [
....
ParentComponent
]
})
export class ParentModule {}

我猜你可以删除customer.module.ts，如果它只用于路由。作为额外的参考，您可以使用:https://www.telerik.com/blogs/angular-basics-setting-up-child-routes-angular-12#:~:text=In%20Angular%2C%20the%20router%20lets,property%20inside%20the%20routing%20module.&text=Here%20you%20can%20see%20that,of%20them%20wherever%20we%20go.

我建议你考虑写"路线"。组件以及如何将它们集成到您的"模块"中;组件，它将使你的代码更容易理解，它将更结构化。

使用RouterModule。对于child，你是在与根服务相同的路由器服务上创建一个路由配置，但不是在"父"child这个词在这里有歧义…

所以你的路由当前配置为/customer而不是/parent/customer

要修复它，你需要显式地配置子路由。

在子路由器上导出路由配置:

export const childRoutes: Routes = [
{
path: 'customer',
component: CustomerComponent
}
];

然后从你的父级路由配置中使用该变量来配置子路由:

const parentRoutes: Routes = {
path: 'parent',
children: [
// (other child routes),
...childRoutes,
],
// (other configs)
}

相关内容

最新更新

热门标签：