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中获取param，最好将param分配给变量并在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中读取路由参数

2 个答案: