Angular 路由问题

Question

我试图在 angular 中的同一模块中从一个组件路由到另一个组件，但在单击 'Submit' 按钮后出现以下错误 - 这是组件应该切换。

LoginComponent.ts

login () {
    if (this.username === 'Iftekhar' && this.password === 'Sunny') {
      const user: User = {
        'id' :1 ,
        'name' :'Iftekhar'
      };
      this.store.dispatch ( new LoggedInAction ( {user} ) );
      this.route.navigateByUrl('courses');
    }
    const courses = [
      {
        'id' :1 ,
        'name' :'Course 1'
      }
    ];
    this.store.dispatch ( new LoadCourses ( {courses} ) );
    this.route.navigateByUrl('/courses').catch(err=>{
      console.log(err);
    })
  }

AppRoutingModule.ts

const routes: Routes = [
  {path: 'courses', component: CoursesComponent}
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}
export const RoutingComponent =  [CoursesComponent]

错误：-

Error: Cannot match any routes. URL Segment: 'courses'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)

完整代码可在此处获得 - https://github.com/training-session-101/Angular6

Answer 1

尝试使用此代码：

this.route.navigateByUrl('courses');

另一个问题是您导入了错误的路由定义文件，该文件没有配置任何路由

import { AppRoutingModule } from './app-routing.module';

应该是

import { AppRoutingModule } from './app.routing.module';

删除多余的文件。

Angular 路由问题

Issue With Angular Routing

angular-routing

angular