Question

我正在尝试获取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无效，我收到错误消息：

获取http://localhost:4200/param1/runtime.js净值：: 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 { }

具有完全相同的结果。

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

Answer 1

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

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

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

Answer 2

使用children实现您想要的

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

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

2 个答案: