无法为Angular路由添加参数。

Question

我正在尝试使用Angular Routing来做一个简单的主从界面，但我就是无法让我的路由在有参数的情况下工作。

我有这个主组件

    export class PersonMasterComponent extends MasterExtentionService implements OnInit {
       constructor(
           private _snackBar: MatSnackBar,
           private _router: Router,
           private contService: ContactService) 
            { super(contService, _snackBar, null, _router) }
}

继承自:

        Injectable()
        export class MasterExtentionService {

        constructor(private dataService: DataService,
                private snackBar: MatSnackBar,
                private matDialog?: MatDialog
                , private router?: Router
            ) { }
        ...
            edit(id: number) {
        ...
                    this.router.navigate(['crm', 'contacts','detail', id]); // I just type the URL directly for 
                                                                            // this example, this 
                                                                            // will be a variable.
                                                                            // i've trie navigateByUrl as 
                                                                            //  well
                }
            }
}

edit() 每当一行在主组件上被点击时就会被调用。

我已经做了上千次了，但我似乎找不到这里有什么问题。(我一直停留在Angular 7，刚换到9)

这是我的应用路线。

const routes: Routes = [
  { path: 'crm', loadChildren: () => import('./crm/crm.module').then(m => m.CrmModule), canActivate: [AuthGuard] },
}

这是我的CRM模块的路由

const routes: Routes = [
  { path: 'contacts/detail/:id', component: PersonDetailComponent }, // I am trying to call this guy 
                                                                     // from PersonMasterComponent

  { path: 'contacts', component: PersonMasterComponent, children: [
    // { path: 'detail/:id', component: PersonDetailComponent,  }, // tried doing this didn't work
  ] },

  { path: 'businesses/:id', component: PersonMasterComponent },
  { path: '', component: CrmComponent }

];

每当我试着导航时 路由器确实能识别出路径的存在 但它只是迅速回到初始路径并重新加载主组件。

这个问题似乎只发生在我的路由上有参数的时候。 我感觉我漏掉了一些很基本的东西。

我昨天遇到了这个问题，这让我很抓狂。 如果有任何帮助，我将深表感激。

--编辑这里是路由器在订阅router.event时给出的日志。https:/docs.google.comdocumentd1rpQRIQJ6UifEsAzIRaWIFbnly4ttljLrOxejuExXVbsedit。

它看起来确实像找到了正确的路线，但只是立即返回.这似乎只发生在我试图从同一个懒惰加载模块中的组件加载组件时，我能够从应用程序的其他部分加载它。

干杯。

Answer 1

验证导航中的第一个项目应该以前导符开始。/，否则就不尊重根。

this.router.navigate(['/crm', 'contacts','detail', id]); // <- /crm