Angular 2路由参数无法显示URL值问题求助

我来帮你搞定这个问题！你遇到的Cannot match any routes错误，核心原因是你的路由配置里没有定义能匹配/directory/test这种带参数的路径。下面一步步实现需求：

1. 修正路由配置 #

首先要在你的路由模块（通常是app-routing.module.ts）里，给Directory组件的路由添加路由参数占位符，这样Angular才能识别/directory/xxx格式的URL：

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

const routes: Routes = [
  // 添加:name作为参数占位符，匹配/directory/后面的任意字符串
  { path: 'directory/:name', component: DirectoryComponent },
  // 可选：添加默认路由，访问根路径时重定向到默认参数页面
  { path: '', redirectTo: '/directory/default', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在Directory组件中获取路由参数 #

接下来要在Directory组件里，通过ActivatedRoute获取URL中的参数，然后赋值给sampleurl变量，这样就能在视图中显示了：

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 = '';

  // 注入ActivatedRoute服务用于获取路由参数
  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 方式1：用snapshot获取初始参数（适合参数不会动态变化的场景）
    this.sampleurl = this.route.snapshot.paramMap.get('name') || '';

    // 方式2：订阅params变化（适合参数可能动态更新的场景，比如同路由切换不同参数）
    // this.route.paramMap.subscribe(params => {
    //   this.sampleurl = params.get('name') || '';
    // });
  }
}

3. 验证视图显示 #

你的HTML代码已经满足需求，保持原样即可：

<p> Directory View </p>
<p>{{sampleurl}}</p>

现在访问http://localhost:4200/directory/test，视图就会显示test，而且不会再出现路由匹配错误啦！

如果之后需要支持双向联动（比如修改视图中的值同步更新URL），可以结合Router服务的navigate方法实现，比如添加输入框绑定sampleurl，在值变化时调用this.router.navigate(['/directory', this.sampleurl])。

内容的提问来源于stack exchange，提问作者themanwiththemasterplan