Angular2 路由问题修复详解_网络技术_宿州市腾雀网络科技有限公司

Angular2 路由问题修复详解

发布时间 - 2026-01-10 23:20:38 点击率：次

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命令。

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

# angular # 路由详解 # angularjs路由详解 # angularjs # 路由问题修复 # Angular2 之路由与导航详细介绍 # 详解angular2实现ng2-router 路由和嵌套路由 # Angular2学习笔记——详解路由器模型（Router） # Angular2之二级路由详解 # 这个问题 # 请注意 # 的是 # 这是 # 放在 # 我会 # 这段 # 欢迎大家 # 我将 # 什么呢 # 跳转 # 介绍一下 # 改了 # 组织结构 # 跳转到 # 过程中 # 出现了 # 其中包含 # 但是我 # 路由功能

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：XRAI Glass：AI赋能的增强现实眼镜，对话新体验

下一篇：利用服务器管理器建站，怎样实现多站点管理？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：XRAI Glass：AI赋能的增强现实眼镜，对话新体验

下一篇：利用服务器管理器建站，怎样实现多站点管理？