无法使用 Angular 2 的路由参数显示 url 的值

Question

我试图让它在用户输入 URL (http://localhost:4200/directory/test) 时，它将使用双向数据绑定在视图中显示 'test'。当我将字符串添加到 URL

的末尾时，我只会收到错误消息

ERROR : EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'test' Error: Cannot match any routes. URL Segment: 'test'

HTML

    <p>
    Directory View 
    </p>

<p>{{sampleurl}}</p>

目录组件

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-directory',
  templateUrl: './directory.component.html',
  styleUrls: ['./directory.component.css']
})
export class DirectoryComponent implements OnInit {
  sampleurl: string;

  // get a snapshit of the current sampleurl URL and display those detials in the view
  constructor(private route: ActivatedRoute) {
    this.sampleurl = route.snapshot.params['sampleurl'];
  }

  ngOnInit() {
  }

}

我的路线文件

import { Routes, RouterModule } from '@angular/router';
import { DirectoryComponent } from './directory/directory.component';
import { HomeComponent } from './home/home.component';


const APP_ROUTES: Routes = [
    { path: '/',
        component: HomeComponent
    },
    {
        path: '/directory',
        component: DirectoryComponent,
    },
    {
        path: '/directory/:sampleurl',
        component: DirectoryComponent,
    }
];

export const APP_ROUTES_PROVIDER = RouterModule.forRoot(APP_ROUTES);

应用模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router'; // This is what we need for routing

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { DirectoryComponent } from './directory/directory.component';

const appRoutes: Routes = [
  { path: 'directory', component: DirectoryComponent},
  { path: '', component: HomeComponent}
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    DirectoryComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes) // Add here array with paths and components
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

将您的路线修改为如下所示

const APP_ROUTES: Routes = [
    { path: '/',
        component: HomeComponent
    },
    {
        path: '/directory/:sampleurl',
        component: DirectoryComponent,
    }
];

你现在有这个错误的原因是路由是按顺序计算的，这意味着路由器找到了第一条路径，它有 directory 但没有 :sampleurl，并且不知道目录后面的位要做什么。

Answer 2

我认为您没有将路线导入到您的应用程序模块中。因此，您没有路线，这就是您收到该错误的原因。如果您的路线被导入到您的应用程序中，您会收到错误消息，因为您无法使用 / 开始路线。如果你这样做，你会得到这个：

Unhandled Promise rejection:
Invalid configuration of route '/directory': path cannot start with a slash
; Zone:
<root>
; Task:
Promise.then
; Value:
Error: Invalid configuration of route '/directory': path cannot start with a slash
Error: Invalid configuration of route '/directory': path cannot start with a slash

因此，第一步是：验证您是否在应用程序模块中导入路由器模块。路由工作后，将路由配置更改为如下所示：

{ path: '', component: HomeComponent },
{ path: 'directory', component: DirectoryComponent },
{ path: 'directory/:sampleurl', component: DirectoryComponent }

这是从 Angular 路由示例派生的一个工作示例：

https://stackblitz.com/edit/angular-4jkdxd?file=src%2Fapp%2Fdirectory-component%2Fdirectory-component.component.ts

无法使用 Angular 2 的路由参数显示 url 的值

Can't display the value of the url with Angular 2's Route params

angular2-routing

angular