Question

我在angular2应用程序上配置我的路线：

所以，在app.routes.ts：

export const ROUTES: Routes = [{
   path: '', redirectTo: 'login', pathMatch: 'full'
  }, {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')
  }, {
    path: 'login', loadChildren: () => System.import('./login/login.module')
  }, {
    path: 'validate/:id/:token', loadChildren: () => System.import('./validate/validate.module')
  }, {
    path: 'error', component: ErrorComponent
  }, {
    path: '**',    component: ErrorComponent
  }
];

目前，我正面临两个问题：

当我转到http://localhost:3000时，它被重定向到http://localhost:3000/Living%20User%20Platform#/login：我不太明白为什么将此Living%20User%20Platform#添加到网址，而不是http://localhost:3000/login。
如您所见，我设置了一个包含两个参数的路线：validate/:id/:token。然而，当我在浏览器上写这个URL（http://localhost:3001/Living%20User%20Platform#/validate?id=sdfsdf&token=sdfsdf）时，它会转到错误路径：

ValidateModule.ts：

export const routes = [
  {path: '', component: Validate, pathMatch: 'full'}
];

@NgModule({
  declarations: [
    // Components / Directives/ Pipes
    Validate
  ],
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild(routes),
  ]
})
export default class ValidateModule {
  static routes = routes;
}

有什么想法吗？

Answer 1

您的路线正在Living%20User%20Platform，因为您可能未在HTML中设置正确的<base href="/">，而您需要使用UTL validate/:id/:token检查网址http://localhost:3001/Living%20User%20Platform#/validate/sdfsdf/sdfsdf < / p>

Answer 2

我已经改变了我的路线（validate/:id/:token只需validate路径）：

export const ROUTES: Routes = [{
   path: '', redirectTo: 'login', pathMatch: 'full'
  }, {
    path: 'app',   loadChildren: () => System.import('./layout/layout.module')
  }, {
    path: 'login', loadChildren: () => System.import('./login/login.module')
  }, {
    path: 'validate', loadChildren: () => System.import('./validate/validate.module')
  }, {
    path: 'error', component: ErrorComponent
  }, {
    path: '**',    component: ErrorComponent
  }
];

为了使用ActivatedRoute

从组件中获取查询参数

constructor(private router: Router, private route: ActivatedRoute, private userService: UsersService)
  {
    this.user = undefined;
  }

  ngOnInit():void {
    this.route.queryParams.subscribe(params => {
      this.id = params['id'] || undefined;
      this.token = params['token'] || undefined;
    });
  }

Angular2路由配置（带两个参数的路由）

2 个答案: