Question

我的页面http：// localhost：4200正确加载，但是当我想转到链接http：// localhost：4200 / login时，它返回链接http：// localhost：4200并显示错误。 / p>

localhost：4200 /登录，返回链接http：// localhost：4200并显示错误。

routing-module.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule , Routes} from '@angular/router';
import { LoginComponent } from './components/login/login.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';


const routes:Routes=[
   { path : 'login',component:LoginComponent },
   { path : 'task' ,component:TaskManagerComponent }
];

@NgModule({
  declarations: [
    LoginComponent

  ],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
    RoutingModuleModule
  ],
  exports:[RouterModule]
})
export class RoutingModuleModule { }

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule , Routes} from '@angular/router';


import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { TaskManagerComponent } from './components/task-manager/task-manager.component';
import { TaskFormComponent } from './components/task-manager/task-form/task-form.component';
import { TaskListComponent } from './components/task-manager/task-list/task-list.component';
import { TaskDetailComponent } from './components/task-manager/task-detail/task-detail.component';
import { TaskItemComponent } from './components/task-manager/task-list/task-item/task-item.component';

const appRoute:Routes = [
  {path:'' ,component:TaskManagerComponent}

]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    TaskManagerComponent,
    TaskFormComponent,
    TaskListComponent,
    TaskDetailComponent,
    TaskItemComponent,
  ],
  imports: [
    BrowserModule,
       RouterModule.forRoot(appRoute)

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

 <div class="row">
    <div class="col">
        <app-header></app-header>
    </div>
  </div>
  <hr>
  <div class="row mt-5 mb-5">
    <div class="col mx-auto">
      <router-outlet></router-outlet>
    </div>
  </div>
  <hr>
  <div class="row">
    <div class="col">
      <app-footer></app-footer>
    </div>
  </div>

Answer 1

这是因为您要在app.module.ts和routing-module.module.ts中声明路由。而是在路由模块中声明所有路由。您可以使用@angular/cli来生成路由模块，以便使用更好的名称来创建它。如果使用cli命令创建它，请将名称设置为routing，因为Angular已经为您添加了module。在您的姓名中明确添加module会在您的班级名称（Module中给您带来冗余的RoutingModuleModule字。

删除在您的app.module.ts中创建的路由，并导入RoutingModule（在您的情况下为RoutingModuleModule）

imports: [
  BrowserModule,
  RoutingModuleModule
]

从您的app.module.ts到routing.module.ts的路线

const routes: Routes = [
   { path: '' , redirectTo: '/task', pathMatch: 'full' }
   { path: 'login', component: LoginComponent },
   { path: 'task' , component: TaskManagerComponent }
];

错误：无法匹配任何路线。网址段：“登录”

1 个答案: