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

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

问题:点击了 navigate to 之后,浏览器地址栏已经出现了 custom:


image.png


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


image.png


解决办法:在入口 Component,即 browserTest Component 的模板文件里,增添 router-outlet:


image.png


然而带来的副作用是:出现了两份一模一样的 UI:


image.png


原因:


image.png


解决办法是,创建一个新的 EntryComponent,作为整个应用的入口:


image.png


最后 app.component.html 里,放置的是 entry selector:


image.png


最后的运行时效果:点 navigate 之前

image.png


点击之后:

image.png

相关文章
|
5天前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
12 0
|
7天前
|
C++
【angular】启动项目和路由配置
【angular】启动项目和路由配置
18 1
|
5月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
5月前
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
|
5月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
22天前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
5月前
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
|
8月前
|
前端开发
从 Angular 2 升级到 Angular 13 之后的一些常见错误和解决方案
从 Angular 2 升级到 Angular 13 之后的一些常见错误和解决方案
53 0
Angular最新教程-第十一节 路由四 (嵌套路由)
Angular最新教程-第十一节 路由四 (嵌套路由)
325 0
Angular最新教程-第十一节 路由四 (嵌套路由)
|
JavaScript 网络架构
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
248 0
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)

热门文章

最新文章