时间戳

首页 > 解决方案 > 无法检测到 Angular Routes 数组

angular - 无法检测到 Angular Routes 数组

问题描述

我正在尝试在包含 2 个组件的 Angular 项目中使用路由：联系人和关于。我关注了有关如何执行此操作的文档和 youtube 视频，但我无法理解我遇到的这个错误。我不明白为什么即使我已经在 app.module.ts 中导入也找不到 routingComponents。我读了一些有类似问题的问题，但我看到的解决方案对我不起作用。有人可以解释一下吗？这是我下面的代码，带有错误的图像

错误图片

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './second/second.component';

const routes: Routes = [
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent}
]; 

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export routingComponents = [AboutComponent, ContactComponent]

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule, routingComponents } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, routingComponents],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<h1>Routing & Nagivation</h1>

<nav>
  <a routerLink="/contact">Contact</a>
  <a routerLink="/about">About</a>
</nav>
<!-- Router View goes here -->
<router-outlet></router-outlet>

索引.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Portfolio2</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

标签： angularcomponentsurl-routingangular11

解决方案

问题出在app-routing.module.ts. 你失踪了const：

改变这个：

export routingComponents = [AboutComponent, ContactComponent]

对此：

export const routingComponents = [AboutComponent, ContactComponent]

推荐阅读