Question

我在页面上有一个路由器出口，左侧使用列表组件，其中右侧将在路由器出口存在的情况下从URL中拉出。登录后，我可以重定向到父页面而没有任何问题。当我重定向到儿童的网址时，出现以下错误，整个网站崩溃后，所有点击均无效。

ERROR Error: "[object Object]"
resolvePromisehttp://localhost:5772
/polyfills.js:3136:31resolvePromisehttp://localhost:5772
/polyfills.js:3093:17scheduleResolveOrRejecthttp://localhost:5772
/polyfills.js:3195:17invokeTaskhttp://localhost:5772
/polyfills.js:2743:17onInvokeTaskhttp://localhost:5772
/vendor.js:58027:24invokeTaskhttp://localhost:5772
/polyfills.js:2742:17runTaskhttp://localhost:5772/polyfills.js:2510:28drainMicroTaskQueuehttp://localhost:57729
/polyfills.js:2917:25invokeTaskhttp://localhost:5772
/polyfills.js:2822:21invokeTaskhttp://localhost:5772
/polyfills.js:3862:9globalZoneAwareCallbackhttp://localhost:5772
/polyfills.js:3888:17

该部分的路线

/****************   PROJECTS SUB ITEMS SECTION *********************/
  {
    path: 'projects/:projectId/sub', component: ProjectSubComponent, children: [
      //catch all
      { path: '', component: SelectItemComponent },
      { path: 'add', component: ProjectSubEditComponent }, //new sub project
      { path: ':subId', component: ProjectSubDetailComponent, canActivate: [AuthGuard] }, //detail - keep it before below edit
      { path: ':subId/edit', component: ProjectSubEditComponent }
    ]
  }

这是示例signInUser方法

signInUser(userName: string, password: string) {
    this.user = new User(userName, password);
    this.isLoggedIn = true;

    //check if we have query parameter return then take the user to that component otherwise to the projects components
    this.activatedRoute.queryParams.subscribe(
      (params: Params) => {
        console.log(params);
        const returnParam = params['return'];
        if (returnParam) {
          //return the user back to the return parameter
          this.router.navigate([returnParam]);
        }
        else {
          //redirect to projects
          this.router.navigate(['projects'])
        }
      }
    );
  }

这是登录http://localhost:57729/?return=%2Fprojects%2F1%2Fsub%2F1之前的网址

，登录重定向后的网址类似于http://localhost:57729/projects/1/sub/1

，这是/ projects / 1 / sub的html。

<div class="row">
  <!-- Sub List Items -->
  <div class="col-md-3">
    <app-project-sub-list></app-project-sub-list>
  </div>

  <!-- To put in the child routes -->
  <div class="col-md-9">

    <router-outlet></router-outlet>

  </div>
</div>

这一切我缺少什么？

更新1： 我有paramsInheritanceStrategy: 'always'，因此我可以在子组件中获取父参数。不想做父级快照。

const routingConfig: ExtraOptions = {
  paramsInheritanceStrategy: 'always'
}

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes, routingConfig) //routingConfig being used, default is emptyOnly so overwriting
  ],
  exports: [RouterModule],
  declarations: []
})
export class AppRoutingModule { }

登录进入对象错误后重定向到子路由

0 个答案: