如何在 Angular 中从 url 中获取 id 和 token 7+

Question

问题已更新
我在 Internet 上寻找信息，但不幸的是我什么也没找到。如果将它们作为参数传输，有很多关于 Angular 如何从 url 字符串中捕获值的信息，但我有另一种情况。

成功提交注册后，我的应用程序从后端向前端发送 url。此 url 包含 id 和 token，看起来像这样：

http://localhost:4200/activate?id=MzU&token=541-b257b0475444facd4e3f

我的问题是，我如何在 Angular 7+ 中捕获 url 中的 id 和 token 值？

请注意，正如我所说，这个url来自后端。用户注册后，我的后端生成此 url 并发送包含它的电子邮件。用户单击 url 并在浏览器中打开它。

谢谢！

目前我试过以下，none 这个有效：

// app-routing.module.ts
const routes: Routes = [
  { path: 'activate*', component: EmailConfirmationComponent },
  // otherwise redirect to root
  { path: '**', redirectTo: '', canActivate: [AuthGuard] }
];

// email-confirmation-component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

export class EmailConfirmationComponent implements OnInit {
  private id: string;
  private token: string;

  constructor(
    private activatedRoute: ActivatedRoute,
    private router: Router
  ) {}

  ngOnInit() {
    this.activatedRoute.params.forEach((params: Params) => {
      this.id = params['id'];
      this.token = params['token'];
      console.log(this.id, +'\n' + this.token);
    });

    this.activatedRoute.paramMap.subscribe(params => {
      console.log(params);
    });

    console.log(this.activatedRoute.snapshot.params['id']);
    console.log(this.activatedRoute.snapshot.params['token']);
    console.log(this.activatedRoute.snapshot.paramMap.get('id'));

    this.activatedRoute.queryParams.subscribe(params => {
      console.log(params['token']);
      console.log(params['id']);
    });
  }
}

Answer 1

让您的后端在 JSON 字符串中发送这两个参数会不会更容易（这样更容易解析）。否则，您可以像对待任何其他字符串一样对待 URL 并使用 .indexof 等 TS 字符串命令来提取信息。

Answer 2

这是错误的：

http://localhost:4200/activate/id=MTk/token=540-6293a45d6567def9ea3b

它不能是这样的，因为你没有通往这个 URL 的路线，应该是这样的：

http://localhost:4200/activate?id=MTk&token=540-6293a45d6567def9ea3b

然后从

获取它们

this.activatedRoute.queryParams...

Answer 3

你需要添加这个URL路由配置：

const routes: Routes = [
  { path: 'activate*', component: EmailConfirmationComponent },
  { path: 'activate/:id', component: LoadSomeComponent},
  // otherwise redirect to root
  { path: '**', redirectTo: '', canActivate: [AuthGuard] }
];

然后在 'LoadSomeComponent' 的初始化中，您应该从参数中获取 ID，从查询参数中获取令牌。

顺便说一句，最好将此路由添加为 'activate' 路由的子路由。

Answer 4

不幸的是，我得到了 none 个答案。经过长时间的寻找，我终于通过尝试不同的解决方案找到了正确的解决方案。实际上，从 URL 获取所需参数的方法非常简单。我缺少一件重要的东西。我们can/must使用;分号代替&和?看看"Navigating back to the list component"的最后一部分，官方angular dokumentation。并像这样创建 URL：

http://localhost:4200/activate;id=MzU;token=541-b257b0475444facd4e3f

这样 angular 就会将它们捕获为 URL 值。

所以，我的最终方法是这样的：

//app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from './shared/guards/auth.guard';
import { EmailConfirmationComponent } from './auth/register/email_confirmation/email-confirmation.component';

const routes: Routes = [
  { path: 'activate', component: EmailConfirmationComponent },
  // otherwise redirect to root
  { path: '**', redirectTo: '', canActivate: [AuthGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [AuthGuard]
})
export class AppRoutingModule {}

注意您不必将任何 :id 或 :token 直接传递给您的 Routes 配置。

//email-confirmation.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { AuthenticationService } from 'src/app/shared/services';

@Component({
  selector: 'app-email-confirmation',
  templateUrl: './email-confirmation.component.html',
  styleUrls: ['./email-confirmation.component.scss']
})
export class EmailConfirmationComponent implements OnInit {
  constructor(
    private authenticationService: AuthenticationService,
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    // redirect to home if already logged in
    if (this.authenticationService.currentUserValue) {
      this.router.navigate(['/']);
    }
  }

  ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
      console.log(params);
    });
  }
}

所以，这里我们只对ActivatedRoute.params和console.log(params)他们

的Observable进行普通订阅

如何在 Angular 中从 url 中获取 id 和 token 7+

How to catch id and token from url in Angular 7+

angular

angular-router