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

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

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

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

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

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

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

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

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);

angular,parameters,angular-ui-router,

1

Ответов: 3


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 .


0

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

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

0

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

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

не испытано

угловые, параметры, угловой-UI-маршрутизатор,
Похожие вопросы