Angular2 路由问题修复 、求解
Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题。为了说明今天的问题,我特地新建了一个测试工程。欢迎交流。
首先介绍一下测试代码的组织结构,
其中包含两个组件: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前面
2.buttonmodule在accordionmodule前面
请注意,更改了顺序以后,务必重新编译,重新执行 ng serve命令。
会什么会出现这个问题?欢迎大家交流。下篇我会专门解释这个问题的答案
为了便于再现,如果有需要源代码的可以联系我QQ:474351703,博客园没办法直接上传
Angular2 路由问题修复 、求解的更多相关文章
- 从Angular2路由引发的前后端路由浅谈
笔者的学习进度比较慢,直到两年以前写的网站都还是以服务端为主导的,即网站的所有视图都由服务器视图模板来渲染,笔者使用的是 DotNet MVC,开发套路就是在Controller里面写Action,在 ...
- angular2路由与express路由冲突的问题
angular2的路由定义了一个/a,如果走angular的路由没问题,如果直接访问/a就会出现cannot GET /a的错误,原因就是express的路由问题. 所以路由走angular2,那ex ...
- angular2路由之routerLinkActive指令
angular2的routerLinkActive指令在路由激活时添加样式class .red{ color: red;} <a routerLink="/user/login ...
- angular2 路由
路由是个模块,命令行生成:ng generate module routerTest; 自己组建: 路由模块说明: Routes:路由配置,路由配置文件类型.比如:const routing:Rout ...
- 解决使用angular2路由后,页面刷新后报404错误。
点击路由链接跳转页面是正常的,但是当刷新页面时就出现了404错误. 解决方法如下: 在app.module.ts中添加import: import {HashLocationStrategy,Loca ...
- 关于angular2跳路由防止页面刷新的做法(Angular2路由重载)
simpleReuseStrategy.ts // 创建重用策略 import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStr ...
- Angular2入门系列教程6-路由(二)-使用多层级路由并在在路由中传递复杂参数
上一篇:Angular2入门系列教程5-路由(一)-使用简单的路由并在在路由中传递参数 之前介绍了简单的路由以及传参,这篇文章我们将要学习复杂一些的路由以及传递其他附加参数.一个好的路由系统可以使我们 ...
- angular2地址栏路由配置
一步一步route过去可以,地址栏直接写url怎么就找不到了呢? 这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) exp ...
- Angular2学习笔记——路由器模型(Router)
Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的 ...
随机推荐
- 数据可视化-OmniGraffle软件
OmniGraffle Pro for mac破解版是一款运行在MAC OS平台上的思维导图流程图制作软件,通过思维导图软件(OmniGraffle Pro MAC)帮你组织头脑中思考的信息,组织头脑 ...
- java名词解释,让你更好理解
Java 开发工具包 (JDK) Java开发工具包是Java环境的核心组件,并提供编译.调试和运行一个Java程序所需的所有工具,可执行文件和二进制文件.JDK是一个平台特定的软件,有针对Windo ...
- lower_bound和upper_bound算法实现
lower_bound算法要求在已经按照非递减顺序排序的数组中找到第一个大于等于给定值key的那个数,其基本实现原理是二分查找,如下所示: int lower_bound(vector<int& ...
- iOS 之 编外知识点
iOS 使用github iOS 开源库介绍 iOS 优质方案 iOS 开发framework 后端数据库使用 Bomb方案 iOS 错误及解决汇总 后台 之 Bmob 申请苹果企业账号
- Pearson相关系数
理解皮尔逊相关的两个角度 其一, 按照高中数学水平来理解, 皮尔逊相关(Pearson Correlation Coefficient)很简单, 可以看做将两组数据首先做Z分数处理之后, 然后两组数据 ...
- iOS 之 获取View所在控制器
1. UIResponder UIViewController *uvc; UIResponder* nextResponder = [self.superview.superview.supervi ...
- 原生javascript实现图片放大镜效果
当我们在电商网站上购买商品时,经常会看到这样一种效果,当我们把鼠标放到我们浏览的商品图片上时,会出现类似放大镜一样的一定区域的放大效果,方便消费者观察商品.今天我对这一技术,进行简单实现,实现图片放大 ...
- 关于pandas精度控制
最近使用pandas处理一批数据,数据中包含几个columns,它们的数据精度,例如 3.25165,1451684684168.0,0.23 处理完之后保存csv时发现,1451684684168. ...
- easyui treegrid实现显示checkbox并能获取到选定值的
闲聊: 小颖最近忙疯了,经常被加班,昨天都要下班了,又提了个需求,虽然写的代码不多只有几行,可是测试环境很难跑通,一会就ie崩溃了,所以弄得小颖最近老是头晕. 也不知道最近是怎么了,一向特别爱吃的小颖 ...
- js精要之函数
数组排序 ,,,,,]; arr.sort(function(a,b){ return a-b; }); console.log(arr); arguments 参数存储对象 function ref ...