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路徑，以便相應的ChangePasswordComponent僅顯示第二個URL，第三個URL等。

我試圖通配路徑（例如account/changeforgottenpassword/** ），但這沒有用。

最后，當我訪問帶有參數中指定的電子郵件地址的URL時，最終得到的只是404。

程式碼片段在這里： https ： //plnkr.co/edit/g2wkInKnWnbRhgqVHkRg？p = catalogue

謝謝您的寶貴時間，SO社區！

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