首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法将参数添加到角度路径

无法将参数添加到角度路径
EN

Stack Overflow用户
提问于 2020-06-03 07:29:12
回答 1查看 39关注 0票数 0

我正在尝试为一个简单的master-detail接口使用Angular路由,但是当其中有参数时,我就不能让我的路由工作。

我有这个主组件

代码语言:javascript
运行
复制
    export class PersonMasterComponent extends MasterExtentionService implements OnInit {
       constructor(
           private _snackBar: MatSnackBar,
           private _router: Router,
           private contService: ContactService) 
            { super(contService, _snackBar, null, _router) }
}

它继承自:

代码语言:javascript
运行
复制
        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()

我以前已经做过一千次了,但我就是找不到这里有什么问题。(我被困在了7号角,刚刚切换到9号)

以下是我的应用程序路由:

代码语言:javascript
运行
复制
const routes: Routes = [
  { path: 'crm', loadChildren: () => import('./crm/crm.module').then(m => m.CrmModule), canActivate: [AuthGuard] },
}

以下是我的CRM模块路由:

代码语言:javascript
运行
复制
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.events https://docs.google.com/document/d/1rpQRIQJ6UifEsAzIRaWIFbnly4ttljLrOxejuExXVbs/edit时提供的日志

看起来确实找到了正确的路线,但很快就会返回。这似乎只有当我试图从同一个延迟加载模块中的组件加载组件时才会发生,我可以从应用程序的其他部分加载它。

干杯。

EN

回答 1

Stack Overflow用户

发布于 2020-06-03 13:22:07

导航中的verify first项应该以前导/开头,否则它不会考虑根。

代码语言:javascript
运行
复制
this.router.navigate(['/crm', 'contacts','detail', id]); // <- /crm
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/62162958

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档