读取 HTML 中的路由参数

Question

我们可以通过HTML设置路由参数：

<a [routerLink] = "['/api/foo/', id]"/>

我知道我们可以通过 typescript 中的处理事件来读取路由参数:

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

@Component({...})
export class MyComponent implements OnInit{

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    // subscribe to router event
    this.activatedRoute.params.subscribe((params: Params) => {
        let Id = params['id'];
        console.log(Id);
      });
  }
}

但是，有什么方法可以读取 HTML 中的路由参数，而不是 TypeScript 组件中的路由参数？

我想按以下方式使用：

<a href="api/foo/[routerLink]"/>

Answer 1

如果你想在html中获取参数，最好将参数分配给一个变量并在html

中使用它

private param:number;

private ngOnInit() {
    // subscribe to router event
    this.activatedRoute.params.subscribe((params: Params) => {
        this.param = params['id'];
        console.log(this.param);
      });
  }

在你的html

<div>{{param}}</div>

Answer 2

如果你想获取 id 作为数字。你可以用这个。

id:number;

 ngOnInit() {

        this.subscription = this.activatedRoute.params.subscribe(
          (params: any) => {
            if (params.hasOwnProperty('id')) {
               id= +params['id'];
              //do whatever you want
            }
          }
        );

      }

这破坏了订阅

ngOnDestroy() {
    this.subscription.unsubscribe();
  }

并且您可以访问 html 端的 id 字段。

读取 HTML 中的路由参数

Reading routing parameter in HTML

javascript

typescript

angular2-routing

angular