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

Question

我有两个应用程序。我们从一个应用程序进入第二个应用程序。来自第一个应用程序

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

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

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

根据第一个应用程序的 URL prams，我们必须重定向到特定组件。

angular 应用中的路由

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

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

Answer 1

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

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

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

然后您使用 link 重定向用户，如下所示： http://secondapplink.com/login

然后，Angular 路由器将自己查找并呈现登录组件。

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

Answer 2

订阅路线事件然后

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;
  });
}

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

How to capture the URL parameters and based in url params redirect to other component in angular4

angular

angular-ui-router

url-parameters