Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «отправить» - PullRequest
Новая
       33

Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «отправить»

0 голосов
/ 02 сентября 2018

Я пытаюсь перейти от одного компонента к другому, но у меня ничего не работает. Я тоже пробовал 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>

Оба компонента являются дочерними для компонента приложения.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

попробуйте сейчас: 

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

у вас не было маршрута для навигации к имеющемуся у вас компоненту отправки, теперь вы можете перейти к нему из любого другого компонента.

0 голосов
/ 02 сентября 2018

у вас должно быть что-то вроде yourcomponent-routing-module.ts или app-routing.module.ts

Если у вас его нет, сгенерируйте его, используя угловой кли. 

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 { }
...