Question

我试图将一个组件中的一个组件路由到同一模块中的另一个组件中，但是单击“提交”按钮后却出现以下错误-这是组件应切换的动作。

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';

删除多余的文件。

角度路由问题

1 个答案: