경로가 일치하지 않습니다. URL 세그먼트

Question

나는 장치 구성 요소 아래 링크를 가지고 있고 그것이 경로 나 장치 구성 요소

<a [routerLink]="['/devicescommands',device.Id]" class="col-1-4" data-toggle="tooltip" data-placement="top" title="کد های بازگشت"> 
          <span class="glyphicon glyphicon-book" aria-hidden="true"></span> 
         </a> 

을 명령 할 것으로 예상이 내 라우팅 모듈입니다 :

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 

import { DeviceComponent } from './device/device.component'; 
import { CommandComponent } from './device/command/command.component'; 
import { DeviceConfigurationComponent } from './device/configuration/device- 
configuration.component'; 
import { ModulesComponent } from './modules/modules.component'; 
import { ModuleConfigurationComponent } from 
'./modules/configuration/module-configuration.component'; 

const routes: Routes = [ 
{ path: '', redirectTo: '/modules' }, 

{ path: 'modules', component: ModulesComponent }, 
{ path: 'moduleconfiguration/:id', component: ModuleConfigurationComponent 
}, 

{ path: 'devices', component: DeviceComponent}, 
{ path: 'devicescommands/:id', component: CommandComponent }, 
{ path: 'deviceconfiguration/:id', component: DeviceConfigurationComponent } 
]; 

@NgModule({ 
imports: [ 
    RouterModule.forRoot(
     routes, 
     { enableTracing: true } 
    ) 
], 
exports: [RouterModule] 

}) 수출 클래스 AppRoutingModule {}

이것은 응용 프로그램 모듈입니다 :

import { NgModule, APP_INITIALIZER } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { ReactiveFormsModule } from '@angular/forms'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { HashLocationStrategy, LocationStrategy } from '@angular/common'; 

import { AppRoutingModule } from './app-routing.module'; 
import { CatalogServerService } from './share/catalog-server-service/catalog-server-service' 
import { StatusPipe } from './share/pipes/status.pipe'; 
import { ProfileConfigPipe } from './share/pipes/profile-config.pipe'; 
import { PersianDatePipe } from './share/pipes/persian-date.pipe'; 
import { SuccessFaildPipe } from './share/pipes/success-faild.pipe'; 

import { AppComponent } from './app.component'; 
import { DeviceComponent } from './device/device.component'; 
import { DeviceService } from './device/services/device.service'; 
import { DeviceConfigurationComponent } from './device/configuration/device- 
configuration.component'; 
import { CommandComponent } from './device/command/command.component'; 

import { ModulesComponent } from './modules/modules.component'; 
import { ModulesService } from './modules/services/modules.service'; 
import { ModuleConfigurationComponent } from 
'./modules/configuration/module-configuration.component'; 

import { DynamicFormComponent } from './share/dynamic-from/dynamic- 
form.component'; 
import { DynamicFormControlComponent } from './share/dynamic-from/dynamic- 
form-control.component'; 

import { SignalRService } from './share/services/signalr-r-service'; 

@NgModule({ 
imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    ReactiveFormsModule, 
    AppRoutingModule 
], 
declarations: [ 
    DeviceComponent, 
    DeviceConfigurationComponent, 
    CommandComponent, 
    ModulesComponent, 
    ModuleConfigurationComponent, 
    StatusPipe, 
    PersianDatePipe, 
    ProfileConfigPipe, 
    SuccessFaildPipe, 
    DynamicFormComponent, 
    DynamicFormControlComponent, 
    AppComponent, 
], 
providers: [ 
    CatalogServerService, 
    { 
     provide: APP_INITIALIZER, 
     useFactory: (configService: CatalogServerService) => { return() => configService.loadConfig(); }, 
     deps: [CatalogServerService], 
     multi: true 
    }, 
    ModulesService, 
    DeviceService, 
    SignalRService, 
    { provide: LocationStrategy, useClass: HashLocationStrategy } 
], 
bootstrap: [AppComponent] 
}) 
export class AppModule { } 

내가 devicescommands 클릭 나는 그것을 CommandComponent 노선을 기대하지만 콘솔에서이 오류가 링크 :

errors.ts:42 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'devicescommands/96c1f24d-6673-4df0-9704-e44842821605' 
Error: Cannot match any routes. URL Segment: 'devicescommands/96c1f24d-6673-4df0-9704-e44842821605' 
    at ApplyRedirects.noMatchError (apply_redirects.ts:160) 
    at CatchSubscriber.eval [as selector] (apply_redirects.ts:142) 
    at CatchSubscriber.error (catch.ts:55) 
    at MapSubscriber.Subscriber._error (Subscriber.ts:139) 
    at MapSubscriber.Subscriber.error (Subscriber.ts:109) 
    at MapSubscriber.Subscriber._error (Subscriber.ts:139) 
    at MapSubscriber.Subscriber.error (Subscriber.ts:109) 
    at MapSubscriber.Subscriber._error (Subscriber.ts:139) 
    at MapSubscriber.Subscriber.error (Subscriber.ts:109) 
    at LastSubscriber.Subscriber._error (Subscriber.ts:139) 
    at ApplyRedirects.noMatchError (apply_redirects.ts:160) 
    at CatchSubscriber.eval [as selector] (apply_redirects.ts:142) 
    at CatchSubscriber.error (catch.ts:55) 
    at MapSubscriber.Subscriber._error (Subscriber.ts:139) 
    at MapSubscriber.Subscriber.error (Subscriber.ts:109) 
    at MapSubscriber.Subscriber._error (Subscriber.ts:139) 
    at MapSubscriber.Subscriber.error (Subscriber.ts:109) 
    at MapSubscriber.Subscriber._error (Subscriber.ts:139) 
    at MapSubscriber.Subscriber.error (Subscriber.ts:109) 
    at LastSubscriber.Subscriber._error (Subscriber.ts:139) 
    at resolvePromise (zone.js:769) 
    at resolvePromise (zone.js:740) 
    at zone.js:817 
    at ZoneDelegate.invokeTask (zone.js:424) 
    at Object.onInvokeTask (ng_zone.ts:253) 
    at ZoneDelegate.invokeTask (zone.js:423) 
    at Zone.runTask (zone.js:191) 
    at drainMicroTaskQueue (zone.js:584) 
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:490) 

devicescommands 링크가 DeviceComponent입니다.

Answer 1

두 기기 모두 '기기'로 시작하므로 devices 경로가 내 devicescommands 경로와 방해가된다고 생각합니다. 두 가지의 순서를 다음과 같이 바꿀 경우 :

{ path: 'devicescommands/:id', component: CommandComponent }, 
{ path: 'devices', component: DeviceComponent}, 

그러면 작동합니다.