angular2 - 基于外部查询参数路由到组件

Question

如何配置我的路由器以支持基于某些查询字符串的重定向？考虑以下情况：该应用程序发送一封带有代码验证的电子邮件，我希望用户单击该电子邮件并转到特定组件。（例如 - http://some.site.com/activate?code=XXX）应该转到 ActivateComponent 并将代码作为输入。

我怎样才能做到这一点？

Answer 1

可以，试试下面，

Route,
 { path: 'activate', component: ActivateComponent  }

@Component({
   selector: 'activate',
   template: `
     <h1>{{code | async}}</h1>
   `
  })
export class ActivateComponent  {
  code = "";
 constructor(private router: Router) {}

 ngOnInit() {
  // Capture the code if available
    this.code = this.router
     .routerState
     .queryParams
     .map(params => params['code'] || 'None');
  }
}

无论你想走到哪里，你都可以有一些类似于下面的功能，

  gotoLink = () =>{
     let navigationExtras = {
       queryParams: { 'code': 'XXX' }
     };

     this.router.navigate(['/activate'], navigationExtras);
  }

这是Plunker!!

angular2 - 基于外部查询参数路由到组件

angular2 - route to component based on external query param

angular2-directives

angular2-routing

angular