如何捕获 URL 参数并基于 url 参数重定向到 angular4 中的其他组件答案

【问题标题】：How to capture the URL parameters and based in url params redirect to other component in angular4如何捕获 URL 参数并基于 url 参数重定向到 angular4 中的其他组件
【发布时间】：2018-08-24 23:29:54
【问题描述】：

我有两个应用程序。从一个应用程序，我们来到第二个应用程序。从第一个应用程序

http://localhost:8080/myfirst-portal/?account_number=RDQsssyMDE=&firstname=UssssGhpbA==&lastname=RGFsssuY2U=&role=csssG9ydGFsZmllbGR1c2Vy

当从第一个应用程序到第二个应用程序时，它会向第二个应用程序发送一些数据。

第二次申请 http://localhost:8080/myapp/#/login

基于来自第一个应用程序的 URL prams，我们必须重定向到特定组件。

角度应用程序中的路线

{ path: '', pathMatch: 'full', redirectTo: '/login' }, { path: '**', pathMatch: 'full', redirectTo: '/login' },

实现这一目标的最佳方法是什么？

【问题讨论】：

第一个应用程序不是 Angular 应用程序

标签： angular angular-ui-router url-parameters

【解决方案1】：

订阅路由事件，然后

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number

       // apply you condition here{
         this.router.navigateByUrl(['show_alunos']);
        }
    });
  }

如果您想阅读详细说明，您可以阅读此主题使用click here 有好的话题

另外，配置你的路由文件

RouterModule.forRoot([
  { path: 'login', component: LoginComponent },
  { path: 'nomination', component: HomeComponent }
])

尝试使用 NavigationEnd

previousUrl: string;
constructor(router: Router) {
  router.events
  .filter(event => event instanceof NavigationEnd)
  .subscribe(e => {
    console.log('prev:', this.previousUrl);
    this.previousUrl = e.url;
  });
}

【讨论】：

第一个应用程序不是 Angular 应用程序。我需要从第一个应用程序中捕获参数并基于此值，我需要执行重定向到不同的页面
localhost:8080/myfirst-portal/… 到 localhost:8080/myapp/#/login 在第二个需要捕获 account_numbre、firts_name 等。

【解决方案2】：

如果您在第二个应用程序中设置了路由，Angular 路由器将自己完成这项工作。

如果在您的第二个应用程序中您有类似的配置，例如：

RouterModule.forRoot([
  { path: 'login', component: LoginComponent },
])

然后您使用如下链接重定向用户： http://secondapplink.com/login

然后，Angular 路由器会自己查找并渲染 Login 组件。

当然，在部署应用程序的生产环境中，您必须设置 URL 重写，以免出现错误。在开发模式下，您不必担心这一点。

【讨论】：

第一个应用程序不是 Angular 应用程序。我需要从第一个应用程序中捕获参数并基于此值，我需要执行重定向到不同的页面