且构网

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

Angular 路由的一个问题,以及解决方案

更新时间:2022-09-05 20:36:55

问题:点击了 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 路由的一个问题,以及解决方案