Angular2 路由问题修复详解


Posted in Javascript onMarch 01, 2017

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

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

Angular2 路由问题修复详解

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

我展示一下路由配置:

/**
 * Created by guozhiqi on 2017/2/24.
 */
import {Route,Routes}from '@angular/router';
import {AppComponent}from './app.component';
import {LayoutComponent}from './layout/layout.component';

export const routes:Routes=[
 {
  path:'',
  redirectTo:'button',
  pathMatch:'full'
 },
 {
  path:'',
  component:LayoutComponent,
  children:[
   {
    path:'button',
    loadChildren:'./Button/Button-guo.module#ButtonGuoModule'
   },
   {
    path:'accordion',
    loadChildren:'./accordionguo/accordion-guo.module#AccordionGuoModule'
   }
  ]
 },
 {
  path:'**',
  redirectTo:'button',
 }
];

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

目前的结果什么呢?

我展示一下appmodule.ts代码:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {ButtonGuoModule}from './button/button-guo.module';
import { AppComponent } from './app.component';
import {ButtonsModule}from 'ng2-bootstrap/buttons';
import {routes}from './app.routing';
import {RouterModule}from '@angular/router';
import {CommonModule}from '@angular/common';
import {AccordionGuoModule}from './accordionGuo/accordion-guo.module';
import {LayoutComponent}from './layout/layout.component';
@NgModule({
 declarations: [
  AppComponent,LayoutComponent
 ],
 imports: [RouterModule.forRoot(routes),AccordionGuoModule,
  BrowserModule,RouterModule,CommonModule,
  FormsModule,ButtonGuoModule,
  HttpModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

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

执行结果:

1.accordionmodule在buttonmodule前面

Angular2 路由问题修复详解

2.buttonmodule在accordionmodule前面

Angular2 路由问题修复详解

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

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

Javascript 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
Jquery之美中不足小结
Feb 16 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
轮播图组件js代码
Aug 08 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
JavaScript基础之流程控制语句的用法
Aug 31 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 #Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 #Javascript
Angular.js之作用域scope'@','=','&'实例详解
Feb 28 #Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 #Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
You might like
用 php 编写的日历
2006/10/09 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现TCP服务器端与客户端的方法详解
2015/04/30 Python
python实现自动重启本程序的方法
2015/07/09 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
python中装饰器级连的使用方法示例
2017/09/29 Python
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
详解python中的Turtle函数库
2018/11/19 Python
tensorflow常用函数API介绍
2020/04/19 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
作文批改评语大全
2014/04/23 职场文书
竞聘上岗演讲稿
2014/05/16 职场文书
应届大专生求职信
2014/06/26 职场文书
警察正风肃纪剖析材料
2014/10/16 职场文书
2014年教研室工作总结
2014/12/06 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
导游词之安徽九华山
2019/09/18 职场文书
浅谈Python 中的复数问题
2021/05/19 Python
python基于turtle绘制几何图形
2021/06/15 Python
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers