使用Angular2进行路由（缺少404页）-Java 学习之路

我在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页面缺失错误 . 有谁知道我可能做错了什么？

EDIT

将模块路由更改为：

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

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

Routes to 404:

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

Routes to empty page:

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

2 回答

试试这个：

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/

回复于 2024-05-03T11:04:35+08:00

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

模块路由最终如下：

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

并称为导航方法如下：

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

现在加载我的配置组件 .

回复于 2024-05-03T11:04:35+08:00

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

2 回答

相关问题