javascript - Angular 2 中的 404s 参数中的电子邮件地址

Question

我有几个具有共同关系的 URL: http://localhost:3000/account/changeforgottenpassword

(200OK，通过) http://localhost:3000/account/changeforgottenpassword/testexample/75c09b18-6090-44df-a18d-d1fe06ab1cde

(200OK，通过) http://localhost:3000/account/changeforgottenpassword/testexample2/75c09b18-6090-44df-a18d-moreblahd1fe06ab1cde

(404 - 失败) http://localhost:3000/account/changeforgottenpassword/blahblah@test.com/75c09b18-6090-44df-a18d-moreblah

在 app.module.ts 中，我配置了以下路由(为简洁起见，缩短了代码):

    import { RouterModule } from '@angular/router';

    RouterModule.forRoot([
      { path: 'login', component: LoginComponent },
      { path: 'login/forgotpassword', component: ForgotPasswordComponent },
  { path: 'account/changeforgottenpassword/:type/:id', component: ChangePasswordComponent },
      { path: 'dashboard', component: DashboardComponent },
      { path: '', redirectTo: 'login', pathMatch: 'full' },
      { path: '**', component: PageNotFoundComponent }
    ])

所有路线均有效。但是，需要配置 account/changeforgottenpassword 路径，以便仅针对第二个 URL、第三个 URL 等显示相应的 ChangePasswordComponent。

我尝试对路径使用通配符(例如 account/changeforgottenpassword/**)，但这不起作用。

最后，当我访问参数中指定电子邮件地址的 URL 时，得到的只是 404。

代码片段在这里:https://plnkr.co/edit/g2wkInKnWnbRhgqVHkRg?p=catalogue

感谢您抽出时间，S.O.社区!

Answer 1

您需要定义通配符是什么，例如:

{ path: 'account/changeforgottenpassword/:type/:id', component: AnotherComponent }

然后可以通过 ActivatedRouteSnapshot 或 ActivatedRoute 访问这些。

@Component()
export class AnotherComponent implements OnInit {
    private _route: ActivatedRouteSnapshot;

    constructor(route: ActivatedRouteSnapshot) {
        this._route = route;
    }

    ngOnInit() {
        // http://localhost:3000/account/changeforgottenpassword/blahblahtest/75c09b18-6090-44df-a18d-moreblah
        console.log(this._route.params['type']) // blahblahtest
        console.log(this._route.params['id']) // 75c09b18-6090-44df-a18d-moreblah
    }
}