redux 为什么从SubjectsComponent.html视图导航失败？

vm0i2vca 于 2023-03-02 发布在其他

关注(0)|答案(1)|浏览(71)

在下面显示的SubjectsComponent.html中，routerLink应该导航到SubjectComponent视图，但Angular给出了一个url的noMatch错误。我还在另一个routerLink中硬编码了参数，如SubjectsComponent.html的后半部分所示，但得到了相同的错误。

<div class="container">
<div class="row text-center">
    <div class="col"> 
        <h1 style="color: var(--bs-red);">{{gradeLabel}} Subjects</h1>
        <h5>Please select your subject:</h5>            
        
        <a class="" *ngFor="let subject of subjects"                
            [routerLink]="['/subject', grade, subject._id]">
            <h1>{{subject.name}}</h1>
        </a>
    </div>
    <div class="col-12">
        <a class="login" 
            [routerLink]="['/subject', '9', '63e2739b3dad93238da85918']">
            Testing
        </a>
    </div>
</div>

然而，当我把硬编码的锚标记放在一个完全不同的html，HeaderComponent.html中时，到SubjectComponent的导航工作正常。问题似乎出在SubjectsComponent.html上。从它开始的所有导航都失败了。
AppRoutingModule如下所示：

{
   path: 'subject',
   loadChildren: () => import('./subjects/subjects.module').then(m => m.SubjectsModule)
 },

受试者组件路径模块如下所示：

const routes: Routes = [
 {
   path: ':grade/:subjectId',
   component: SubjectComponent
 },
]

SubjectComponent在主题组件模块中声明：

import { SubjectComponent } from './subject/subject.component';

@NgModule({
  declarations: [
    SubjectComponent,
  ],
  imports: [
  SubjectsRoutingModule
  ]
})
export class SubjectsModule { }

错误：
错误错误：未被抓住的（承诺中的）：错误：NG04002错误：编号匹配错误处的NG04002（主文件0bf04579cd00cfcc.js：1：262866）

redux

来源：https://stackoverflow.com/questions/75584727/why-is-navigation-from-subjectscomponent-html-view-failing

1条答案

按热度按时间

8ulbf1ek1#

您看到的错误消息，错误：NG04002，通常是由路由器配置不正确或路由器链路中的打字错误引起的。
根据您提供的代码，问题似乎出在AppRoutingModule中的loadChildren属性。loadChildren属性应指向包含主题路径路由的模块。在本例中，它应指向SubjectsModule。
确保您的SubjectsModule使用正确的路由导出RouterModule，包括SubjectComponent。下面是SubjectsModule中路由的示例：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SubjectComponent } from './subject.component';

const routes: Routes = [
  { path: '', component: SubjectComponent },
  { path: ':grade/:id', component: SubjectComponent }
];

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

确认路由器配置正确后，请仔细检查 *ngFor循环中的subject对象是否存在grade和_id属性。如果其中一个属性缺失或为空，则路由器链接将无法正常工作。
最后，如果问题仍然存在，请尝试向AppRoutingModule添加通配符路由，以捕获与您定义的路由不匹配的任何路由。这可以帮助您识别路由器链接的任何拼写错误或其他问题。以下是通配符路由可能的外观示例：

const routes: Routes = [
  // ... other routes
  { path: '**', component: PageNotFoundComponent }
];

赞(0）回复(0）举报 2023-03-02

我来回答

redux 为什么从SubjectsComponent.html视图导航失败？

1条答案

相关问题

热门标签

最新问答