Angular 2 - 根路径路由器的多个参数答案

【问题标题】：Angular 2 - multiple parameters of root path routerAngular 2 - 根路径路由器的多个参数
【发布时间】：2020-08-30 19:47:33
【问题描述】：

我正在尝试获取 Angular 2 应用程序根页面的多个参数。我想在我的 HomeComponent 中获得类似“http://example.com/param1/param2/..”的路径的 param1、param2 ...。例如，路径可能看起来像：“http://example.com/telephones/accessories/cases” 但我只能得到第一个参数。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: ':a', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: ':a/:b', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

home-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

home.component.ts

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit 
{
  id1:any;
  id2:any;

  constructor(private activateRoute: ActivatedRoute,){}

  ngOnInit() {
      this.id1 = this.activateRoute.snapshot.params['a'];
      console.log("id1 - "+this.id1);
      this.id2 = this.activateRoute.snapshot.params['b'];
      console.log("id2 - "+this.id2);
    };
}

在http://localhost:4200/param1 上它可以工作，但http://localhost:4200/param1/param2 不是，我收到错误：

GET http://localhost:4200/param1/runtime.js net::ERR_ABORTED 404（未找到）

我已经尝试过这样的另一种方式：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', loadChildren: () => import('./pages/home/home.module').then(m => m.HomeModule) },
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

home-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';

const routes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: ':a', component: HomeComponent, pathMatch: 'full' },
  { path: ':a/:b', component: HomeComponent, pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class HomeRoutingModule { }

结果完全一样。

请告诉我如何解决我的问题？

【问题讨论】：

标签： angular angular-routing angular-router

【解决方案1】：

您是否在 index.html 中添加了base？

<!doctype html>
<html lang="en">
  <head>
    <base href="/">
  </head>
  <body>
   <my-app>loading</my-app>
  </body>
</html>

在示例中，您可以下载并构建 example 它会破坏 index.html

【讨论】：

我在我的 app.module.ts 中提供了 APP_BASE_HREF：提供者：[{provide: APP_BASE_HREF, useValue: '/'}]，但我也尝试了你的变体，但没有结果
您的示例运行良好，我正在尝试了解我的结构有什么问题（与您的有些不同）
Resume：我在 index.html 中使用了providers: [{provide: APP_BASE_HREF, useValue: '/'}], 而不是<base href="/">，假设它是相同的，但在实践中，就我而言，它们的做法不同。 @Radik 谢谢！

【解决方案2】：

使用children 来实现你想要的

const routes: Routes = [
  { path: '', 
   component: HomeComponent,
   pathMatch: 'full',
   children: [
      { path: ':a', 
        component: HomeComponent,
        pathMatch: 'full', 
        children: [
           { path: ':b', component: HomeComponent, pathMatch: 'full' }
        ]
      }
   ]
];

【讨论】：

卡特琳娜，不幸的是它不起作用。在您的决定中，我什至无法获得第一个参数。