Angular2查询参数未定义

Question

我的网站是一个看起来像这样的组件层次结构。

• 应用
• ......标题
• ....... SearchBar
• ......内容
• ....... PageSearchResults
• ....... Page2
• ....... Page 3
• ...页脚

App管理路由器插座并根据URL更改内容。我搜索＆＃34;领主＆＃34;使用SearchBar组件中的输入文本字段并导航到以下URL：

http://localhost:4200/search/lord

它按预期加载内容区域中的PageSearchResults，我可以使用以下代码从查询参数中读取：

＆＃13;

＆＃13;

var query = "";
this.route.params.forEach(params => {
  query = params['query'];
});

＆＃13;

＆＃13;

＆＃13;

像魅力一样工作。现在我希望SearchBar组件中的文本输入字段显示与查询参数相同的值。如果我将上述代码复制粘贴到SearchBar组件中，它将不再有效。它会说params [＆＃39; query＆＃39;]是未定义的。如果我将我的SearchBar组件放入PageSearchResult组件而不是App组件，它将正常工作。

是否存在某种关于谁可以读取URL中的查询参数的黑巫术？