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

Question

我正在尝试获取 Angular 2 应用程序根页面的多个参数。我想在我的 HomeComponent 中获取 param1、param2 ... 路径，如“http://example.com/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 { }

家-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 it works, but http://localhost:4200/param1/param2 上不是，我收到错误：

GET http://localhost:4200/param1/runtime.js net::ERR_ABORTED 404 (Not Found)

我试过这样的另一种方法：

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 { }

家-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 { }

结果完全一样。

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

Answer 1

使用children实现你想要的

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

Answer 2

你在你的 index.html 中添加了 base 了吗？

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

例如，您可以下载并构建 example 它会损坏 index.html

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

Angular 2 - multiple parameters of root path router

angular-routing

angular

angular-router