天天看點

Angular 路由的一個問題,以及解決方案

問題:點選了 navigate to 之後,浏覽器位址欄已經出現了 custom:

Angular 路由的一個問題,以及解決方案

但是并沒有顯示我期望的 DummyComponent 内容,其 onInit 方法根本就沒有被調用到:

Angular 路由的一個問題,以及解決方案

解決辦法:在入口 Component,即 browserTest Component 的模闆檔案裡,增添 router-outlet:

Angular 路由的一個問題,以及解決方案

然而帶來的副作用是:出現了兩份一模一樣的 UI:

Angular 路由的一個問題,以及解決方案

原因:

Angular 路由的一個問題,以及解決方案

解決辦法是,建立一個新的 EntryComponent,作為整個應用的入口:

Angular 路由的一個問題,以及解決方案

最後 app.component.html 裡,放置的是 entry selector:

Angular 路由的一個問題,以及解決方案

最後的運作時效果:點 navigate 之前

Angular 路由的一個問題,以及解決方案

點選之後:

Angular 路由的一個問題,以及解決方案

繼續閱讀