Question

我在Angular2中有一个应用程序，我需要通过路由将两个参数从一个组件传递到另一个组件。这些是主要的应用程序路线：

export const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'correlation', loadChildren: './+mep-correlation#MepCorrelationModule'},
  { path: '**',    component: NoContentComponent },
];

在模块内部，使用另一个名为ShowcaseComponent的组件，用户进行一些选择，然后按下确认按钮。此按钮打开一个Dialog组件，其中包含用户选择的摘要，如果他们确定他们的选择，他们必须再次确认。

此对话框上的确认按钮应该路由到相同的URL，但有2个参数：

public confirmShowcase() {
  this.dialogRef.close();
  this.router.navigate(
    ['configuration', {
      concept : this.selectedConcept.id ,
      level : this.selectedLevel
     }
    ]
  );
}

以下是相关模块的路线：

export const routes = [
  { path: '', component: MepCorrelationComponent , children: [
    { path: 'configuration', children: [
      { path: 'concept:id', children: [
        { path: 'level:id' , component: MepCorrelationConfigurationComponent }
      ]}
    ]}
  ]}
];

MepCorrelationConfigurationComponent是该模块的一个组成部分。

然后在这个组件中，我想读取路由参数，以便在调用服务时使用它们：

public ngOnInit() {
  this.route.params
    .switchMap((params: Params) => {
      return this.correlationService
        .loadCorrelationData(params['concept'], params['level']);
    }).subscribe(
      (correlationData) => {
        this._store.dispatch(
          new LoadCorrelationDataAction(correlationData)
        );
      }
    );
}

我目前遇到的问题是，每当我点击对话框组件上的确认按钮并且页面尝试重定向到http://localhost:3000/#/configuration;concept=14;level=3时，我就会收到404页错误。有谁知道我可能做错了什么？

修改

将模块路线更改为：

export const routes = [
  { path: '', children: [
    { path: '', component: MepCorrelationComponent },
      { path: 'configuracion', children: [
        { path: '/:concepto/:nivel', component: MepCorrelationConfigurationComponent }
      ]}
    ]}
 ];

尝试以各种方式导航方法无济于事：

路线到404：

this.router.navigate([
  'correlation/configuration',
  {
    concept: this.selectedConcept.id,
    level: this.selectedLevel
  }
]);

路由到空白页面：

this.router.navigate([
  'correlation/configuration',
  this.selectedConcept.id,
  this.selectedLevel
]);

Answer 1

试试这个：

http://localhost:3000/#/configuration/concept/14/level/3

 export const routes = [
      { path: '', component: MepCorrelationComponent , children: [
        { path: 'configuration', children: [
          { path: 'concept/:c_id', children: [
            { path: 'level/:id' , component: MepCorrelationConfigurationComponent }
          ]}
        ]}
      ]}
    ];

使用不同的ID名称，以便您可以在ActivatedRoute服务中轻松访问它们。

注意：正确的深层链接方式如下： https://web.facebook.com/groups/groupID/permalink/postID/

Answer 2

我终于能够解决这个问题，我认为问题在于我混淆了可选和必需的路由器参数。

模块路线最终如下：

export const routes = [
  { path: '', children: [
    { path: '', component: MepCorrelationComponent },
    { path: 'configuracion/:conceptId/:levelId', component: MepCorrelationConfigurationComponent }
  ]},
];

并调用了这样的导航方法：

this.router.navigate([
 `correlacion/configuracion/${this.selectedConcept.id}/${this.selectedLevel}`
]);

现在加载我的配置组件。

使用Angular2进行路由（缺少404页）

2 个答案: