角不能导航到嵌套的非子分量。
我在ClientApp/src/app中有一个支付控制器，(没有显示所有代码) payments.module.ts：
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { PaymentsComponent } from "./payments.component";
@NgModule({
imports: [RouterModule.forChild([{path: 'payments',component: PaymentsComponent}])],
declarations: [PaymentsComponent]
})
export class PaymentsModule {}和payments.component.ts：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-payments',
templateUrl: './payments.html'
})
export class PaymentsComponent implements OnInit {
constructor(...) { ... }
ngOnInit(): void {... });
}
}PaymentsModule仅在app.module.ts中引用：
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
...
import { AppComponent } from './app.component';
import { AppRouterModule } from './app-router.module';
import { PaymentsModule } from "./payments/payments.module";
....
@NgModule({
declarations: [AppComponent],
imports: [
HttpClientModule,
PaymentsModule,
AppRouterModule,
.....
],
...
bootstrap: [AppComponent],
})
export class AppModule {}在app router.module.ts中没有提到PaymentsComponent。文件app.component.html有一个<app-menu>选择器，该选择器包含一个mat菜单项，它在导航到支付时没有问题：
<button mat-menu-item [routerLink]="['/payments']">Payments</button>我想要在支付组件中放置一个流程支付组件，但是我做，而不是，希望流程支付组件是支付的子组件。我想导航到处理付款直接通过另一个垫-菜单项目。处理支付的代码与我前面为两个支付文件显示的代码一样基本，我在app.module.ts中添加了相同的引用：
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
...
import { AppComponent } from './app.component';
import { AppRouterModule } from './app-router.module';
import { PaymentsModule } from "./payments/payments.module";
import { ProcessPaymentModule } from "./payments/process-payment/process-payment.module"; //added here
....
@NgModule({
declarations: [AppComponent],
imports: [
HttpClientModule,
PaymentsModule,
ProcessPaymentModule, //added here
AppRouterModule,
.....
],
...
bootstrap: [AppComponent],
})
export class AppModule {}但是，一个新菜单项找不到我的新组件，我得到一个404未找到的错误，没有详细信息：
<button mat-menu-item [routerLink]="['/payment/process-payment']">Process Payment</button>对于routerLink，我尝试过不同的路径，但是总是会被重定向到我的页面not组件。由于不了解如何/为什么找不到新组件，流程-支付结构和引用与支付相同。除了我这个问题以外，还有人能帮助或解释一下这个问题吗？:)谢谢，BB。
回答 1
Stack Overflow用户
发布于 2022-04-20 18:42:35
我想你是在尝试嵌套路线。基本上，您应该在payments.component.ts中有一个children，并在payments.module.ts中将children添加到path payments中。
payments.component.html
<h1>Payments</h1>
<a mat-menu-item [routerLink]="['process-payment']">Process Payment</a>
<!-- Children route will be inserted here -->
<router-outlet></router-outlet>payments.module.ts
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'payments',
component: PaymentsComponent,
children: [
{
path: 'process-payment',
component: ProcessPaymentComponent
}
]
}
])
],
declarations: [PaymentsComponent]
})
export class PaymentsModule {}如果您想从app组件或其他地方导航到处理支付，则routerLink将是['/payments/process-payment']。
您可以在这里找到嵌套路由的文档：https://angular.io/guide/router#nesting-routes
编辑
如果您不想要嵌套的路由，并且只使用一个路由器出口来保持它们的平面，那么您只需要为ProcessPaymentComponent添加一个新的路由。
@NgModule({
imports: [
RouterModule.forChild([
{
path: 'payments',
component: PaymentsComponent
},
{
path: 'payment/process-payment',
component: ProcessPaymentComponent
}
])
],
declarations: [PaymentsComponent]
})
export class PaymentsModule {}然后像你以前试过的那样链接到页面：
<button mat-menu-item [routerLink]="['/payment/process-payment']">Process Payment</button>https://stackoverflow.com/questions/71943435
复制相似问题
腾讯云开发者
