错误：无法匹配任何路由。网址细分：'提交'

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文件。单击该按钮应该显示“提交”组件。

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

这两个组件都是app组件的子组件。

Answer 1

现在就试试：

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

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

Answer 2

你应该有像yourcomponent-routing-module.ts或app-routing.module.ts这样的东西

如果你没有它，使用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 { }