javascript - 如何在根组件中获取查询参数?

标签 javascript angular

在 Angular 2 中,是否有可能以“Angular 方式”获取根组件中的查询参数?

我有一个带有根组件和两个路由/状态的简单 plnkr
我尝试通过以下方式获取参数:

export class App implements OnInit {

  constructor(private route: ActivatedRoute) {

  }
  ngOnInit(){
    console.log(this.route.snapshot.queryParams);
  }
}

如果我使用查询参数打开示例:plnkr,则控制台日志中的对象为空。
但是当我点击“一个”或“两个”链接时,它可以获取查询参数。

我想根看不到查询参数,因为它不是激活的路由。
解决方案是创建一个假的根路由吗?或者是否有另一种读取 url 的方法(不是在谈论原生 JS)。

我的用例:无论我在哪条路线上,我都需要能够检查 url 中是否有“ token ”,从中读取然后将其删除。

最佳答案

看看我的变化:

https://plnkr.co/edit/b45VUvfVqUl5u2EuzNI9?p=preview

{
path: '**',
component: App
}

我已经添加了一个默认路由 - 它应该被添加到路由器中。这基本上是说对于传入的任何其他路由然后转到此处。

<a routerLink="**" [queryParams]="{token:12345678}">Home</a>

在链接中我添加了一个主页链接,类似于您的其他链接。当您导航到一个或两个,然后返回主页时,您将看到对象中传递的 token 。 这是因为在链接中指定了 token 。

这只有在链接具有 token 时才真正有效, token 可以是硬编码的,也可以是由另一个组件动态生成的。

这可能有帮助:

https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

关于javascript - 如何在根组件中获取查询参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41856556/

相关文章:

javascript - 脚本无法在页面加载 JS 上获取元素

javascript - 如何使用 jQuery 或 Javascript 沿对 Angular 线滚动

javascript - “EventModel”必须从 $get 工厂方法返回一个值

angular - Ionic 3 中的 Algolia Instantsearch.js

html - 页眉中的递增数字导致页面滚动时出现微卡顿

javascript - 如何发布请求并将响应呈现为新页面?

javascript - 单页分页问题中的多 Angular Material 表

javascript - 在 Angular 4 中连续循环 CSS 样式

angular - 如何在按钮标签angular2中测试routerLink

javascript - 如何更改扰流板的选择器?