Блог

Главная - Вопросы по программированию - получение параметров при изменении маршрута в корневом компоненте с помощью Angular2

получение параметров при изменении маршрута в корневом компоненте с помощью Angular2

#angular #parameters #angular-ui-router

#angular #параметры #angular-ui-router

Вопрос:

итак, я хочу получить параметры при изменении маршрута в корневом компоненте, я попробовал это :

 export class AppComponent {
       constructor(_router: Router) {
         _router.events.subscribe((links) => {
        console.log("detection : ",links);
    });
    }
}

в результате я получаю ссылки на каждое событие изменения маршрута, например :

 deletection : "/product/1"
deletection : "/product/2"

но я не могу получить значения параметров (1 и 2).

я также протестировал параметры ширины activateRoute, но при изменении маршрута не получил результата.

Файл маршрута :

 export const routes: Routes = [

    { path: "", component: LoginComponent },
    { path: "login", component: LoginComponent, canActivate: [LoggedOutGuard] },
    { path: "product/:id", component: ProductComponent, canActivate: [LoggedOutGuard] },

];

export const appRoutingProviders: any[] = [];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

Комментарии:

1. Пожалуйста, добавьте свой файл маршрутов

2. Любая помощь, пожалуйста?

Ответ №1:

Итак, я хочу получить параметры в корневом компоненте при изменении маршрута

Вы не можете. Почему? Потому что ваш корневой компонент не назначен ни одному маршруту. Перейдите в свой ProductComponent и измените его на что-то вроде этого:

 import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'product'
})
export class ProductComponent implements OnInit, OnDestroy {
  private sub: Subscription;

  constructor(
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.sub = this.route.params.subscribe(params => {
      console.log(params)
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Вы заметите, что ваш идентификатор продукта будет зарегистрирован в консоли, почему? Поскольку ваш ProductComponent назначен маршруту product/:id , поэтому в основном ваши компоненты могут получать параметры маршрута только для маршрутов, которым они назначены.

Единственный способ для вашего AppComponent узнать о параметрах маршрута — это использовать сервис для обмена этой информацией. Таким образом, ваш ProductComponent должен взаимодействовать с созданным вами RouteParamsService.

Комментарии:

1. итак, есть одно решение — получить параметры с помощью регулярного выражения

2. я имею в виду извлечение параметров в конструкторе корневого компонента из ссылок, которые я получаю из events.subscribe (…) с использованием регулярных выражений

3. Вы можете извлекать параметры только для компонентов, назначенных этому маршруту

4. я думаю, что смогу, просто дайте мне несколько минут, чтобы показать вам 🙂

5. О, вы имеете в виду получение полного URL-адреса и выполнение регулярных выражений, чтобы выяснить это? да, вы можете это сделать, но это не масштабируется, и вы, вероятно, получите много несоответствий

Ответ №2:

Я думаю, это может вам помочь….

 constructor(private router:Router){
    router.routerState.queryParams.subscribe(
        (data:any) => {
            console.log("userName parameter in routing " data['userName']);
        });
}

Комментарии:

1. Свойство ‘queryParams’ не существует для типа ‘RouterState’.

Ответ №3:

Я думаю, вам нужно что-то вроде

   constructor(
    private route: ActivatedRoute
    this.route.params.forEach(params => {
      console.log(params)

    });
  }

  getParams(route) {
    let result = [];
    for(var key in route.snapshot.params) {
      var p = new Object();
      result.push(p[key] = route.snapshot.params[key]);
    }
    for(var r in route.children) {
      result = result.concate(this.getParams(r));
    }
    return resu<
  }

не тестировалось

Метки: