Question

我已经在Angular JS中为我同一项目中的其他组件成功实现了路由参数，对于新组件我也遵循相同的方式，但它不起作用，我无法理解代码中的问题

以下是我的路线文件的代码

import { Routes, RouterModule } from '@angular/router';
import { CustomerBillComponent } from '../components/customer_bill.component';

const routes: Routes = [
    { path: 'add-bill', component: CustomerBillComponent },
    { path: 'add-bill/:customer_reference', component: CustomerBillComponent },
];

export const routing = RouterModule.forRoot(routes);

（我也试过使用不同的路线，但它没有用）

以下是My CustomerBillComponent.ts 文件

中的代码

ngOnInit() {
    //When I visit /#/add-bill/CR452152
    let route_location = location['hash'].split('/')[1].toLowerCase();
    console.log(route_location); //prints add-bill in Console
    var customer_reference = this.route.snapshot.params['customer_reference'];
    console.log(customer_reference); //prints undefined
}

我错过了什么

提前致谢!!!

Answer 1

您需要添加ModuleWithProviders。它是模块提供者的包装器。

import {ModuleWithProviders} from '@angular/core';

export const routing: ModuleWithProviders = RouterModule.forRoot(router);

Answer 2

首先尝试：

this.route.params.subscribe(
  (params) => {
    console.log(params);
  }
)

看看你得到了什么。如果这不起作用，则可能是您尝试访问父路由的参数，在这种情况下，您必须升级路由器树才能访问它。

您可以使用.parent属性执行此操作，例如：

this.route.parent.params.subscribe(
  (params) => {
    console.log(params);
  }
)

根据您的需要多次。

Answer 3

我面临着几乎相同的问题。但原因不同。

在我的场景中，借出页面（在路由上指定的组件）是不同的，我试图访问父路由组件上的路由参数。

以下是演示我的方案的代码：

<强> home.module.routing.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
//other import statements...
const routes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      { path: 'buy/:mainType/:subType', component: BuyComponent, data: {} },
      { path: 'buy/:mainType', component: BuyComponent, data: { } },
      { path: '', redirectTo: 'buy', pathMatch: 'full' },
    ]
  },
  { path: 'checkout', component: CheckoutCartComponent },
];

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

因此，我必须访问HomeComponent（Parent）中的RouteParam值，Lending页面是BuyComponent（HomeComponent的子路径）。

所以，我没有使用下面的代码获得路径参数的值：

//在HomeComponent.ts内

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
        this.routeText = params['category'];
        this.title = this.formatTitle(this.routeText);
    });
}

由于借阅页面是BuyComponent，上述代码将无效。 Angular允许仅以登陆组件的方式以上述方式访问路径参数。

我尝试了很多，最后得到了一个解决方案来访问父路径Component中的Route Params。

以下是访问相同代码的代码：

//在HomeComponent.ts内

const routeChildren = this.activatedRoute.snapshot.children;
if (routeChildren.length) {
    //Your code here to assign route params to the Component's Data Member.
}

因此，访问this.activatedRoute.snapshot.children代替this.route.params对我来说是个窍门。

希望如果有人来这里寻找像我这样的问题，这将有所帮助。

最诚挚的问候。

无法读取Angular 2中的Route参数

3 个答案: