Angular 6 将查询参数传递给根

Question

在我的 app.routing.module.ts 中，我配置了以下路由：

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

我想将一个可选的查询参数传递给应用程序的根目录，在我的例子中是 DashboardComponent。

在我的 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 参数：

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

有关如何实现此目标的想法？

Answer 1

文档很好地说明了如何在路由中共享参数：

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

Answer 2

所以你不需要定义没有参数的路由：

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 3

这是我能够做到的：

只需像这样导航：

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

在 Root Component 中这样得到它：

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

我们不需要为查询参数定义路由。它会像这样出现在您的 url 中：http://localhost:4200/?id=82860.

Angular 6 将查询参数传递给根

Angular 6 Passing Query Param to Root

angular

angular5

angular6