天天看點

最簡單的Angular Route hello world場景都跑不通的一個原因

我有一個最簡單的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場景都跑不通的一個原因

繼續閱讀