Как поймать идентификатор и токен из URL в Angular 7+

Question

Вопрос был обновлен
Я искал информацию в интернете, но, к сожалению, ничего не нашел.Существует много информации о том, как Angular может перехватывать значения из строки URL-адреса, если вы передаете их в качестве параметров, но у меня есть другой случай.

После успешной регистрации регистрации мое приложение отправляет URL-адрес из внутреннего интерфейса во внешний интерфейс.Этот URL содержит id и token и выглядит следующим образом:

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

Мой вопрос, как в Angular 7+ можно получить значения id и token из URL?

Пожалуйста, обратите внимание , как я уже сказал, этот URL-адрес исходит от бэк-энда.После регистрации пользователя мой бэкэнд генерирует этот URL и отправляет электронное письмо, которое содержит его.Пользователь щелкает URL-адрес и открывает его в браузере.

Спасибо!

В настоящее время я попробовал следующее, ничего из этого не работает:

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

К сожалению, ни один из ответов не пришел ко мне.После долгих поисков я наконец нашел правильное решение, попробовав разные решения.На самом деле был очень простой способ получить необходимые параметры из URL.Я упустил одну важную вещь.Мы можем / должны использовать ; точки с запятой вместо & и ?. Взгляните на последнюю часть «Переход к компоненту списка» , официальная угловая документация ,И создайте 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);
    });
  }
}

Итак, здесьмы делаем обычную подписку на Observable ActivatedRoute.params и console.log(params) их

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' вы должны получить идентификатор из params и токен из queryParams.

btw будет лучшечтобы добавить этот маршрут как дочерний элемент «активировать» маршрут.

Answer 4

Не было бы проще, чтобы ваш сервер отправлял эти два параметра в виде строки JSON (что было бы намного проще для анализа).В противном случае вы можете обработать URL как любую другую строку и использовать строковые команды TS, например .indexof, для извлечения информации.