Angular 7 - 从单独的应用程序/服务器将 url 参数传递给路由答案

【问题标题】：Angular 7 - Pass url params to route, from separate app/serverAngular 7 - 从单独的应用程序/服务器将 url 参数传递给路由
【发布时间】：2019-07-17 20:42:21
【问题描述】：

我有一个 Angular 7 应用程序，并且需要从较旧的旧系统导航到此应用程序。

这个旧系统仍然使用 JSP 页面，但我可以使用 jQuery 来调用新的 Angular 7 应用程序。

请求是导航到 Angular 应用程序，并根据旧屏幕的 url 中传递的参数预先填充或过滤字段/视图。

所以，我的问题是，我如何调用诸如 http://localhost:8080/myScreen 之类的 Angular 路由 url，并从一个完全独立的应用程序屏幕中为其提供 url 参数，然后在屏幕组件中使用它来预过滤数据？

它是使用 url 参数的一些简单解决方案吗，例如：http://localhostl:8080/myScreen?param1=Hello&param2=World

【问题讨论】：

标签： angular http parameters routes

【解决方案1】：

您可以通过

使用ActivatedRoute

MyScreenComponent.ts

constructor(private route: ActivatedRoute) { }

ngOnInit()
   const {param1,param2} = this.route.snapshot.params;
   //do what you want with the params
}

将您的路线配置为

{ path: 'myScreen/:param1/:param2', component: MyScreenComponent }

如果您愿意，可以更改上面的代码以使用 queryParams。

【讨论】：

【解决方案2】：

考虑一下：

  ngOnInit() {
    console.log('BComponent::ngOnInit');

    this.myForm = this.fb.group({
      fname: 'default fname',
      lname: 'default lname'
    });

    this.route.queryParams.subscribe(params => {
      this.myForm.setValue({
        fname: params['param1'],
        lname: params['param2']
      })
    });
  }

这里的 myForm 是从 queryParams 填充的。

检查这个stackblitz。

【讨论】：