javascript - AppComponent 中的 RouteParams

Question

我正在尝试制作一个简单的单组件应用程序来测试 Angular2，但我非常坚持访问我的应用程序组件中的 RouteParams。

这是我目前所拥有的:

@Component({
  selector: 'app',
  template: '<h1>ID: {{id}}</h1>',
  directives: [ROUTER_DIRECTIVES],
  providers: []
})
@RouteConfig([
  { path: '/', component: App }
])
class App {
  private id: string

  constructor(params: RouteParams) {
    this.id = params.get('id')
  }
}

bootstrap(App, [
  ROUTER_PROVIDERS,
])

所以基本上我想要实现的是让用户转到http://website.com/?id=21然后让网站显示 21. 我是否需要为此创建一个单独的组件，然后让我的 AppComponent 提供到该组件的路由，或者是否有任何方法可以访问应用程序组件中的路由参数？

Answer 1

这可能会做你想做的事

  constructor(private router:Router, private routeSerializer:RouterUrlSerializer, private location:Location) {
    router.changes.first().subscribe(() => {
      let urlTree = this.routeSerializer.parse(location.path());
      console.log('serializer', urlTree.children(urlTree.root)[0].segment);
      // or to get the next segment of the path:
      // console.log('serializer', urlTree.children(urlTree.children(urlTree.root)[0])[0].segment);
    });
  }