Error: Cannot match any routes. URL Segment: 'submit'

Question

我正在尝试从一个组件导航到另一个组件，但没有任何效果。我也试过 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 文件。单击该按钮应该会显示 "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>

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

Answer 1

你应该有类似 yourcomponent-routing-module.ts 或 app-routing 的东西。module.ts

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

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

这里是一个示例路由 module.the 路由的目标是 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 { }

Answer 2

立即尝试：

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} ]

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

Error: Cannot match any routes. URL Segment: 'submit'

Error: Cannot match any routes. URL Segment: 'submit'

url

router

typescript

routerlink

angular