Угловой 6 Передача запроса Param в корень

Question

В моем app.routing.module.ts настроены следующие маршруты:

{
  path: '',
  redirectTo: 'dashboard',
  pathMatch: 'full',
}, {
  path: '',
  component: AdminLayoutComponent,
  children: [{
    path: '',
    loadChildren: './admin/admin.module#AdminModule'
  }]
}

Я хочу передать необязательный параметр запроса в корень приложения, который в моем случае равен DashboardComponent. * 1006.*

В моем AdminModule я настраиваю свои маршруты следующим образом:

const routes: Routes = [
  {path: '', component: DashboardComponent, pathMatch: 'full', canActivate: [AuthGuard]},
  {path: '/:id', component: DashboardComponent, pathMatch: 'full', canActivate: [AuthGuard]},
  {path: 'users', component: UsersComponent, canActivate: [AuthGuard]},
];

Я не могу получить доступ к этому параметру id, если я делаю это в моем компоненте Dashboard:

this.route.params.subscribe(
  params => console.log(params) // I get nothing here
);

Есть идеи, как мне этого добиться?

Answer 1

Так что вам не нужно определять маршрут без параметров:

const routes: Routes = [
  {path: '/:id', component: DashboardComponent, pathMatch: 'full', canActivate: [AuthGuard]},
  {path: 'users', component: UsersComponent, canActivate: [AuthGuard]},
];

А в вашем компоненте просто проверьте, равен ли id нулю:

this.route.params.subscribe( params => {
    if(params['id'] == null) {
        // do what u need
    }
}

Answer 2

Вот как я смог это сделать:

Просто перейдите так:

<span class="cursor-pointer" [routerLink]="['/']" [queryParams]="{ 'id': 82860}">Edit</span>

И в Root Component получите это так:

this.route.snapshot.queryParamMap.get('id')

Нам не нужно определять маршрут для параметров запроса.Он появится в вашем URL следующим образом: http://localhost:4200/?id=82860.

Answer 3

Документация очень хорошо иллюстрирует, как обмениваться параметрами в маршруте:

Шаблон HTML:

<a [routerLink]="['/hero', hero.id]">
  <span class="badge">{{ hero.id }}</span>{{ hero.name }}
</a>

Или в компоненте:

gotoHeroes(hero: Hero) {
  let heroId = hero ? hero.id : null;
  // Pass along the hero id if available
  // so that the HeroList component can select that hero.
  // Include a junk 'foo' property for fun.
  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
}

Компонент:

export class HeroListComponent implements OnInit {
  heroes$: Observable<Hero[]>;

  private selectedId: number;

  constructor(
    private service: HeroService,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.heroes$ = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => {
        // (+) before `params.get()` turns the string into a number
        this.selectedId = +params.get('id');
        return this.service.getHeroes();
      })
    );
  }
}

Документы: https://angular.io/guide/router