Angular 错误：无法匹配任何路由。URL段：'；提交'；

我试图从一个组件导航到另一个组件，但没有任何东西对我有效。我也尝试过routerLink，但它也不起作用

下面是我的explore.components.ts文件：

import { Component, OnInit } from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-explore',
  templateUrl: './explore.component.html',
  styleUrls: ['./explore.component.css']
})

export class ExploreComponent implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }

  onClick() {
    this.router.navigate(['/submit']);
  }
}

这是我的explore.html文件。点击按钮将显示“提交”组件

<button type="button" class="btn" (click) = "onClick()">Click here to submit your work <i class="fa fa-hand-peace-o fa-lg"></i></button>

单击此处提交您的工作

---

这两个组件都是应用程序组件的子组件。

您应该有类似于您的component-routing-module.ts或app-routing.module.ts的组件

<button type="button" class="btn" (click) = "onClick()">Click here to submit your work <i class="fa fa-hand-peace-o fa-lg"></i></button>

如果没有，请使用angular cli生成它

ng generate module SomeModule --routing (or ng g m SomeModule --routing, for short)

这是一个路由模块示例。路由的目标是https:yoursite/dashboard/mydashboardtypevalue

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { DashboardContainerComponent } from './dashboard-    container/dashboard-container.component';
import { RequiredAuthenticatedUserRouteGuardService } from '../shared/services/required-authenticated-user-route-guard/required-authenticated-user-route-guard.service';

const routes: Routes = [{
  path: 'dashboard',
  component: DashboardComponent,
  canActivate: [ RequiredAuthenticatedUserRouteGuardService ],
  children: [
{ path: ':dashboardType', component: DashboardContainerComponent } // this is a sample required parameter

  ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
 })
export class DashboardRoutingModule { }

现在就试试吧：

const ROUTES: Routes = [ {path:'', component: HomeComponent},
{path:'sign-up', component: SignUpComponent},
{path:'login', component: LoginComponent},
{path:'contact',component:ContactComponent}, 
{path:'submit',component: SubmitComponent}, 
{path:'explore', component:ExploreComponent} ] 

---

您没有导航到现有提交组件的路由，现在您可以从任何其他组件导航到该组件。

如果您的路由有问题，请在questionconst routes:routes=[{path:''，component:HomeComponent}中显示它们，{path:'sign-up'，组件：SignUpComponent}，{path:'login'，组件：LoginComponent}，{path:'contact'，组件：ContactComponent}，{path:'explore'，component:ExploreComponent}]（在app.module.ts中）您没有一个名为submit的路由！这是因为我要从explore组件到submit组件，而不是从app组件到submit组件？

<button type="button" class="btn" (click) = "onClick()">Click here to submit your work <i class="fa fa-hand-peace-o fa-lg"></i></button>