Question

我在仪表板模块中有一个名为：WhatsAppConversationComponent的组件。我无法前往 WhatsAppConversationComponent在仪表板路线中使用路线。

我的仪表板模块

FindInterval(double x) => Functions.Keys.FindBinary(i => i.Contains(x))

我的仪表板路由模块

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forChild(DashboardRoutes),
        FormsModule,
        MdModule,
        MaterialModule
    ],
    declarations: [
        DashboardComponent,
        SurveyComponent,
        QuestionnaireComponent,
        SurveyReportComponent,
        WhatsAppConversationComponent
    ]
})

export class DashboardModule { }

当我到达路线/ whatsappconversation时，我遇到以下错误：-

export const DashboardRoutes: Routes = [
  {
    path: '',
    children: [{
      path: 'dashboard',
      component: DashboardComponent
    }, {
      path: 'questionnaire',
      component: QuestionnaireComponent
    }, {
      path: 'survey',
      component: SurveyComponent
    }, , {
      path: 'whatsappconversation',
      component: WhatsAppConversationComponent
    }, {
      path: 'survey-report',
      component: SurveyReportComponent
    }]
  }
];

上面的错误未在UI上加载组件

Answer 1

在您完成勘测路线后，这里还有一个逗号

 {
  path: 'survey',
  component: SurveyComponent
}, , {
  path: 'whatsappconversation',
  component: WhatsAppConversationComponent
}, {

那无济于事。但这不是导致此错误的原因。由于您的根路径不会到达某个特定组件，因此Angular认为您正在制作一种称为“无组件路线”的东西。请参阅：https://angular.io/api/router/Route。无组件路线要求您指定出口：“ aux”，以便Angular知道合并路线中主要的出口组件。

我怀疑这是您要做的。您应该在子级路由之前指定一个根组件，以避免此错误。这将阻止Angular尝试合并子路线。

Answer 2

在DashboardRoutes路由配置中，根路由没有定义component或redirectTo的选项。

export const DashboardRoutes: Routes = [
  {
    path: '',
   // there should be a component or redirectTo

无法在Angular 9中路由组件：TypeError：无法读取未定义的属性“出口”

2 个答案: