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!!

希望这有助于！