lazy load routing 設定問題

各位大大好,小弟最近寫的第一個 ng 的應用程式差不多要收尾了
這兩天在處理 lazy loading 的東西,將一些共用元件模組化起來
以下是預期中的效果和 routing 設定

以上 About、Guide、Security 這三個單元用了同一個 ContentComponent,並且透過 id 可以切換不同內容,
routing 設定可以正常切換並瀏覽不同 content

但我設定 loadChildren 之後,點選三大單元卻 load 不出來 ContentComponent
必須手動在網址上加上 id 才會讀出 ContentComponent
想請問是不是我 routing 的設定方式有問題?

另外如果我 route 最上層再多一層 /content/,就可以正常瀏覽

想請問一定得多一層才可以嗎?有沒有不要多那一層 content 的設定方法?
先詭謝各位大大幫忙解惑,感恩!

還有一個小問題… stackblitz 要怎麼 embed 在文章內?感謝大大

根據你第二個範例改的
改了兩個地方

  1. content-routing.module.tspath: '',,你原本有一個 . (WHY??)
  2. content.component.ts 注入 Router,然後在 ngAfterViewChecked() 的地方改用 this.unit = this._theRouter.routerState.snapshot.url.split('/')[1] 這樣的方式取得第一層路徑

這樣是你要的嗎?
或許有更好的作法…

2個讚

!!!
感謝大大的回覆,正常了!!!

由於我的 code 裡有這段

this.active_unit = this._router.snapshot.url[0].path;

多了那個「’.’」是因為擺「’’」會一直說 path undefined
我直覺上以為是 routing 的 path 設定有問題
所以擺了那個句點就不會報錯以為是對的,但結果就是 component 跟資料 render 不出來
沒有想到其實本來就設定是正確的,是因為 ActivatedRoute 的 path undefined 所致
問題已釐清,感謝大大!!

另額外想問的問題是
為何 ActivatedRoute 在 lazy loading 後 path 就 undefined 了?
這意味著開發時盡量少用 ActivatedRoute 嗎?
先謝大大解惑,感恩!

你可能就沒有url[0],所以當然會報undefine的錯誤
應該是先釐清你需要的資料是什麼,再來看看要用來搭配