Angular2 路由问题修复 、求解

简介: Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题。为了说明今天的问题,我特地新建了一个测试工程。欢迎交流。 首先介绍一下测试代码的组织结构,     其中包含两个组件:button、accordion。

Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题。为了说明今天的问题,我特地新建了一个测试工程。欢迎交流。

首先介绍一下测试代码的组织结构,

 

 

其中包含两个组件:button、accordion。这个例子采用的是ng2-bootstrap.

我展示一下路由配置:

 1 /**
 2  * Created by guozhiqi on 2017/2/24.
 3  */
 4 import {Route,Routes}from '@angular/router';
 5 import {AppComponent}from './app.component';
 6 import {LayoutComponent}from './layout/layout.component';
 7 
 8 export const routes:Routes=[
 9   {
10     path:'',
11     redirectTo:'button',
12     pathMatch:'full'
13   },
14   {
15     path:'',
16     component:LayoutComponent,
17     children:[
18       {
19         path:'button',
20         loadChildren:'./Button/Button-guo.module#ButtonGuoModule'
21       },
22       {
23         path:'accordion',
24         loadChildren:'./accordionguo/accordion-guo.module#AccordionGuoModule'
25       }
26     ]
27   },
28   {
29     path:'**',
30     redirectTo:'button',
31   }
32 ];

 

这段路由中我定义了默认路由,会跳转到button,但是我采用最新的angular-cli,并没有进行跳转,并且默认路由并没有使用layoutcomponent组件,这是最大的问题,因为layoutcomponent组件是整个页面的样式文件。

目前的结果什么呢?

我展示一下appmodule.ts代码:

 1 import { BrowserModule } from '@angular/platform-browser';
 2 import { NgModule } from '@angular/core';
 3 import { FormsModule } from '@angular/forms';
 4 import { HttpModule } from '@angular/http';
 5 import {ButtonGuoModule}from './button/button-guo.module';
 6 import { AppComponent } from './app.component';
 7 import {ButtonsModule}from 'ng2-bootstrap/buttons';
 8 import {routes}from './app.routing';
 9 import {RouterModule}from '@angular/router';
10 import {CommonModule}from '@angular/common';
11 import {AccordionGuoModule}from './accordionGuo/accordion-guo.module';
12 import {LayoutComponent}from './layout/layout.component';
13 @NgModule({
14   declarations: [
15     AppComponent,LayoutComponent
16   ],
17   imports: [RouterModule.forRoot(routes),AccordionGuoModule,
18     BrowserModule,RouterModule,CommonModule,
19     FormsModule,ButtonGuoModule,
20     HttpModule
21   ],
22   providers: [],
23   bootstrap: [AppComponent]
24 })
25 export class AppModule { }

 

请注意appmodule.ts中我标红的引入module,如果我将accordionmodule放在buttonmodule前面,那么显示的就是accordionmodule的内容,反之显示的就是buttonmodule的内容。

执行结果:

1.accordionmodule在buttonmodule前面

2.buttonmodule在accordionmodule前面

 

请注意,更改了顺序以后,务必重新编译,重新执行 ng serve命令。

会什么会出现这个问题?欢迎大家交流。下篇我会专门解释这个问题的答案

 为了便于再现,如果有需要源代码的可以联系我QQ:474351703,博客园没办法直接上传

我又回来了,回到了技术最前线,
相关文章
|
6月前
|
JavaScript 前端开发 应用服务中间件
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)
139 0
|
3月前
|
SEO 搜索推荐 数据采集
让 JSF 应用秒变搜索引擎宠儿!揭秘 SEO 优化的神奇魔法,让你的网站脱颖而出!
【8月更文挑战第31天】随着互联网的发展,搜索引擎已成为用户获取信息的主要途径,SEO 对 Web 应用至关重要。本文介绍如何提升 JavaServer Faces(JSF)应用的 SEO 友好性,包括关键词优化、网页结构优化和外部链接建设等基础知识,并提出了使用语义化 HTML 标签、优化页面标题和描述、生成静态 HTML 页面及 URL 重写等具体策略,帮助您的网站在搜索引擎中获得更高排名。
30 0
|
3月前
|
安全 开发者
精通Angular路由管理:从基础设置到高级配置,打造复杂SPA导航系统的全方位指南
【8月更文挑战第31天】在单页应用(SPA)中,路由管理至关重要。Angular通过其强大的路由模块提供灵活高效的解决方案。本文通过代码示例详细介绍如何在Angular中设置和管理路由,包括基础路由配置、懒加载、路由保护及高级配置,帮助开发者构建高效安全的导航系统,满足复杂SPA需求。随着Angular的发展,路由管理将更加完善,值得持续关注。
31 0
|
3月前
|
JavaScript 前端开发 API
如何在 Angular 路由中使用路由解析器
如何在 Angular 路由中使用路由解析器
34 0
|
3月前
如何在 Angular 路由中使用路由守卫
如何在 Angular 路由中使用路由守卫
40 0
|
3月前
如何在 Angular 路由中使用查询参数
如何在 Angular 路由中使用查询参数
25 0
|
3月前
|
JavaScript 前端开发 测试技术
如何在 Angular 中使用懒加载路由
如何在 Angular 中使用懒加载路由
27 0
|
6月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
6月前
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
几个经常用到的angular路由Router、ActivatedRoute 知识点:嵌套路由、路由跳转、路由传参、路由参数获取
|
6月前
|
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