且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

最简单的Angular Route hello world场景都跑不通的一个原因

更新时间:2022-02-07 17:06:38

我有一个最简单的app Component:

最简单的Angular Route hello world场景都跑不通的一个原因

我期望点击了Click Me这个标签之后,能跳转到相对路径/custom2.


在app.module.js里,定义一个route数组:

最简单的Angular Route hello world场景都跑不通的一个原因

Routes是一个type alias,相当于Route[]:


最简单的Angular Route hello world场景都跑不通的一个原因最简单的Angular Route hello world场景都跑不通的一个原因


而Route是一个interface:


最简单的Angular Route hello world场景都跑不通的一个原因

https://angular.io/api/router/Route#description


最简单的Angular Route hello world场景都跑不通的一个原因

我将RouterModule.forRoot返回的Module放到app.module.ts的imports区域之后:


最简单的Angular Route hello world场景都跑不通的一个原因


浏览器访问localhost:4200/custom2, 发现没有跳转到期望的Component里去。


经过检查,发现是因为我的application template里,缺少了router-outlet标签的定义:


最简单的Angular Route hello world场景都跑不通的一个原因


加上之后,问题解决:

最简单的Angular Route hello world场景都跑不通的一个原因