无法匹配任何路由。网址段

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

那么它应该可以工作。

Answer 2

您的CommandComponent 应该从@angular/routes 导入ActivatedRoute，并且必须声明一个id 属性，因为这是您在路径path: 'devicescommands/:id' 中使用的标识符。

您的CommandComponent 应如下所示：

import { ActivatedRoute } from '@angular/router';

@Component({
  .......................................
})

export class CommandComponent implements OnInit {

  id:number;

  constructor(public _route:ActivatedRoute) { }

  ngOnInit() {
    this.id = this._route.snapshot.params["id"];
  }

}

您的 HTML 模板可以这样使用它：

<p>
  CommandComponent recieved the id: {{id}}
</p>