Question

我需要检查当前网址是否有查询字符串。

网址可以是

http://localhost:4200/test?id=55555

或

http://localhost:4200/test

我用过

this.route.queryParams
     .filter(params => 'id' in params)
     .map(params => params.id)
     .distinctUntilChanged()
     .subscribe(
     id=> {
                //check lead Id here
                console.log(id);
            }
     );

但这只适用于网址中有id的情况。不知道如何检查它是否存在。

Answer 1

您可以在订阅功能中直接查看，如下所示：

this.route.queryParams.subscribe((params)=> {
  //check lead Id here
  if(params['id']){
    console.log(params['id']);
  } else {
    console.log('id not found in params')
  }
});

Answer 2

我会说：

ngOnInit() {
 if (this.route.snapshot.queryParams['id']) {
      //do your stuff. example: console.log('id: ', this.route.snapshot.queryParams['id']);
 }
}

就足够了。不要忘记在构造函数中初始化private route: ActivatedRoute和import { ActivatedRoute } from '@angular/router';

因为您只需要检查它是否存在。如果这样做，您的东西就会发生，就像添加一个布尔值以检查它是否被设置。如果它不存在，那么将不会发生任何事情。然后，如果您需要在组件中的其他地方做一些事情，您可以稍后检查 boolean 是否为true / false，这取决于您之前的设置方式。

Answer 3

这是简单的方法：

this.route.queryParams.subscribe(
    (params: Params) => {
        if (params.hasOwnProperty('id')) { console.log(params['id']); }
    }
);

Answer 4

<强>初步

当订阅如下所示的queryParams时，params变量包含一个对象，其中键是所有查询参数，值可以是单个值或值数组。可以console.log(params);来检查此结果。例如：

当网址为：http://example.com/?lion=10&lion=15&cat=20

时

然后我们试着看看params持有什么：

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

结果将是一个对象，其中键是lion和cat但是值是狮子的数组，因为它有两次出现，而cat是单个值：

{ lion: [10, 15], cat:20 }

现在回答问题

我们将网址设为：http://example.com/?id&name=james

人们可以注意到id没有价值。网址可能只有一个密钥但没有值，但我们想知道密钥至少存在。如果我们这样做：

if(params['id']){
    // do something
}

即使密钥ID存在，此条件也将返回false。我们可能实际上想要在单独存在密钥时执行某些操作，而在存在密钥和值时则执行其他操作。在这种情况下，我们可以使用lodash库来有效地对键和键/值结果进行排序。将lodash库导入项目后。可以使用 _.has 执行此操作：

// check if id key is present in params object first
if(_.has(params, 'id')) {
    if(params['id']=="") {
      // id key is present but has no value so do something
    } else {
      // id key is present and has a value as well so do something else
    }
} else {
    // since id key itself is not present do something totally different here
}

当然上面的代码假设id键只在url参数中出现一次。否则，必须循环遍历数组并检查每个值。

Answer 5

我假设你在这里使用Angular Routing System。然后在组件的构造函数中注入当前激活的路径，如下所示：

constructor(private activatedRoute: ActivatedRoute)

然后检查你的ngOnInit（），如下：

ngOnInit() {
    console.log("Hello ngOnInit");
    let token = null;
    this.activatedRoute.queryParamMap.subscribe((next : ParamMap) => {
      token = next.get("token")

      if (token) {
        console.log(token);
      } else {
        console.log("no token given in url");
      }
    });
  }

Answer 6

由于没有人提到snapshot的用法，我正在提供我的答案。如果你实际上不需要一个observable，意味着url被修改一次（例如用户导航到编辑页面），你可以利用更简洁的Snapshot替代方案。所以，在你的应用程序中你可以这样做：

constructor(private route: ActivatedRoute) {

}

ngOnInit(): void { 
    if (this.route.snapshot.params['id']) {
        // id exists, so do something with it.

    }
}

但请记住这一点：

请记住：您只能获得参数映射的初始值这种技术。坚持使用可观察的paramMap方法甚至路由器可以重新使用该组件的机会。这个样本保留可观察的paramMap策略以防万一。

来源：Snapshot: the no-observable alternative

Angular 2检查url中是否存在查询参数

6 个答案: