javascript - 从应用程序中直接输入的网址读取路由参数

Question

我的问题是关于 Angular 4，如何获取路由参数，例如，如果用户使用而不是默认网址进入您的页面，例如http://localhost:3000/ ，类似于 http://localhost:3000/user/:id ，并且能够从该 url 中获取 :id (用户直接在浏览器中输入它，而不是通过应用程序导航)。

在下面的示例中使用了相同的组件，主要是因为需要捕获该 id 并分派(dispatch)其他操作(如果存在)，那就是它。

我尝试过使用 ActivatedRoute 但据我所知，只有在应用程序内部导航整个应用程序时才有效，在这种情况下则不然，它总是返回 null value 如果直接在浏览器中输入该 url，它将被重定向到默认的 / 路由，就是这样。

非常感谢任何提示或指示

app.routing-module.ts

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

export const routes: Routes = [
  {
    path: '',
    component: HookComponent
  },
  {
    path: 'user/:id',
    component: HookComponent
  }
];

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

钩子(Hook)组件

import {Component, EventEmitter, Input, OnInit, ViewChild} from '@angular/core';
import { ActivatedRoute, ParamMap} from '@angular/router';

@Component({
  selector: 'hook',
  templateUrl: 'hook.component.html',
  styleUrls: ['hook.component.scss']
})
export class HookComponent implements OnDestroy, OnInit {
  constructor(private route: ActivatedRoute) {
    
  }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       console.log('params are', params); //null?
    });

  }
}

Answer 1

你的方式已经没问题了，但是在你的示例中 params 是一个数组，你可以通过调用 params['id']< 来访问 :id/:

this.sub = this.route.params.subscribe(params => {
  console.log('params are', params['id']);
});

Here是 stackblitz 上的一个工作示例。