Question

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

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

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

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

使用url参数（例如：http://localhostl:8080/myScreen?param1=Hello&param2=World

）是否是一些简单的解决方案？

Answer 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。

Answer 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。

Angular 7-从单独的应用程序/服务器传递url参数进行路由

2 个答案: