我正在尝试获取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 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 { }
结果完全相同。
请告诉我如何解决我的问题？
使用children实现您想要的目标
const routes: Routes = [
{ path: '',
component: HomeComponent,
pathMatch: 'full',
children: [
{ path: ':a',
component: HomeComponent,
pathMatch: 'full',
children: [
{ path: ':b', component: HomeComponent, pathMatch: 'full' }
]
}
]
];
您是否已在index.html中添加base？
<!doctype html>
<html lang="en">
<head>
<base href="/">
</head>
<body>
<my-app>loading</my-app>
</body>
</html>
在示例中，您可以下载并构建example，它将损坏的index.html