Question

我正在用TypeScript制作一个简单的Angular（版本4）应用程序。

我有一个如下所示的网址： www.example.com/api/1/countries/Italy/

我希望从此网址获取1和Italy并将其分配给变量。

我尝试使用ActivatedRoute这样：

 ngOnInit() {
    this.router
        .queryParams
        .subscribe(params => {
           this.id = +params[''];
           this.country = +params[''];
        });
}

id和country是我的私有变量，我想用URL中的值进行分配。但我不知道如何继续......

我还需要做什么？

Answer 1

在您的网址示例中，您不使用查询参数。因此，从ActivatedRoute获取值的代码可能如下所示：

function spookyPara(){
    document.querySelector("#spookyPara > p").classList.add('hide');
    document.querySelector("#spookyPara > img").classList.remove('hide');
}
function unspookyPara(){
    document.querySelector("#spookyPara > p").classList.remove('hide');
    document.querySelector("#spookyPara > img").classList.add('hide');
}

此代码假定您已使用名为id和country的params配置路由，例如

 this.id = this.route.snapshot.paramMap.get('id');
 this.country = this.route.snapshot.paramMap.get('country');

Answer 2

您可以使用文档访问网址并解析它。

component.ts

import { DOCUMENT } from '@angular/platform-browser';

  constructor(@Inject(DOCUMENT) document: any) {
    console.log(document.location.href);
  }

使用Angular从URL中提取多个参数

2 个答案: