带有参数和获取参数的 Angular 路由

Question

用户将点击电子邮件中的链接，如下所示:

do-something/doSomething?thing=XXXXXXXXXXX

如何在路由器中定义路由并订阅获取参数？

目前在我的路由器中:

    {
     path: 'do-something/:id',
     component: DoSomethingComponent
    },

在组件中:

    ngOnInit() {
     this.sub = this.route
      .params
      .subscribe(params => {
       console.log(params)
      });
    }

但是，路线永远不会匹配。 ":id"不应该考虑将重置密码作为参数后的任何内容吗？

Answer 1

这是我为 Angular 网站得到的

import { Component, OnInit }  from '@angular/core';
import { ActivatedRoute }     from '@angular/router';
import { Observable }         from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
  template:  `
    <p>Dashboard</p>
    <p>Session ID: {{ sessionId | async }}</p>
  `
})
export class AdminDashboardComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
   //read query param
    this.route
      .queryParamMap
      .map(params => console.log(params.get('thing')););

     //read param value 
      this.route
      .paramMap
      .map((params: ParamMap) => 
                           console.log(params.get('id')));
  }
}

在这里阅读 Routinh:https://angular.io/guide/router#!#optional-route-parameters

---

这样试试

const appRoutes: Routes = [
  { path: 'do-something/:id', component: DoSomethingComponent, name: 'Details'}];

现在导航像

this.router.navigate( [
  'Details', { id: 'idvalue', param1: 'value1'
}]);//this you can try from code

这场比赛

do-something/idvalue?param1=value1. //this try from browser

像这样读取查询参数

ngOnInit() {
  // Capture the access token and code
  this.route
      .queryParams
      .subscribe(params => {
          let thing = params['thing'];
      });
}

或者试试这个

(new URL(location)).searchParams.get("parameter_name")