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

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

赞 (0)

相关推荐

  • Angular2学习笔记——详解路由器模型（Router）

    Angular2学习笔记——详解路由器模型（Router）

    Angular2以组件化的视角来看待web应用,使用Angular2开发的web应用,就是一棵组件树.组件大致分为两类:一类是如list.table这种通放之四海而皆准的通用组件,一类是专为业务开发的业务组件.实际开发中大部分时间我们都需要处理业务组件.对于SPA应用来说,一个通用的问题就是如何控制页面的切换,解决这个问题的通用方法就是利用路由器来实现. 路由配置 现在我们先撇开Angular2来看看通用的路由器模型.通常来讲SPA应用需要路由配置信息: [ { path: '', pathMa

  • 详解angular2实现ng2-router 路由和嵌套路由

    实现ng2-router路由,嵌套路由 首先配置angular2的时候router模块已经下载,只需要引入即可 import {RouterModule, Routes} from "@angular/router"; 我们要创建一个嵌套路由,所以需要创建以下文件 index.html app.module.ts app.component.ts home.component.ts list.component.ts list-one.component.ts list-two.com

  • Angular2 (RC5) 路由与导航详解

    之前总结过RC4的路由配置,Angular2升级RC5之后增加了NgModule和RouterModule等等很多组件,所以现在的路由配置方式也变化比较大. 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下顶部添加一个<base>元素. 2.配置路由器 app.routing.ts import { Routes, RouterModule } from '@angular/router'; const appRoute

  • angular2中router路由跳转navigate的使用与刷新页面问题详解

    本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍: 一.router.navigate的使用 navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo :

  • Angular2 (RC4) 路由与导航详解

    基础知识 1.<base href> 大多数带路由的应用都要在 index.html 的 <head>标签下添加一个 <base>元素. 2.导入路由库 import { ROUTER_DIRECTIVES } from '@angular/router'; 3.配置 首选方案是用带"路由数组"的provideRouter工厂函数([provideRouter(routes)])来启动此应用. app.routes.ts import { provi

  • Angular2 之 路由与导航详细介绍

    导航是很简单的,只是不同页面之间的切换,路由是实现导航的一种. 一个url对应的一个页面,在angular2中是一个组件.定义一个规则. 基础知识 大多数带路由的应用都要在index.html的标签下先添加一个元素,来告诉路由器该如何合成导航用的URL. 路由是从@angular/router包中引入的. 路由都是需要进行配置的.而这个配置需要的也就是RouterModule模块. 一个路由配置 path中不能用斜线/开头. 这些路由的定义顺序是故意如此设计的. 路由器使用先匹配者优先的策略来匹

  • Angular2 路由问题修复详解

    Angular2 路由问题修复详解

    Angular2 提供了比angular1 更为强大的路由功能,但是在具体使用路由过程中,可是出现了很多路由不按照预想的方式执行的问题.为了说明今天的问题,我特地新建了一个测试工程.欢迎交流. 首先介绍一下测试代码的组织结构, 其中包含两个组件:button.accordion.这个例子采用的是ng2-bootstrap. 我展示一下路由配置: /** * Created by guozhiqi on 2017/2/24. */ import {Route,Routes}from '@angul

  • Angular2 组件交互实例详解

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间的交互方式主要有如下几种: l 使用输入型绑定,把数据从父组件传到子组件 l 通过 setter 拦截输入属性值的变化 l 使用 ngOnChanges 拦截输入属性值的变化 l 父组件监听子组件的事件 l 父组件与子组件通过本地变量互动 l 父组件调用 ViewChild l 父组件和子组件通过服

  • vue-router 路由基础的详解

    vue-router 路由基础的详解 今天我总结了一下vue-route基础,vue官方推荐的路由. 一.起步 HTML <div id="myDiv"> <h1>简单路由</h1> <router-link to="/foo">Go to foo</router-link> <router-link to="/bar">Go to bar</router-link&g

  • 使用Vue-Router 2实现路由功能实例详解

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 注意:vue-router 2只适用于Vue2.x版本,下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能. 推荐使用npm安装. npm install v

  • vue路由--网站导航功能详解

    1.首先需要按照Vue router支持 npm install vue-router 然后需要在项目中引入: import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) 2.定义router的js文件 import Vue from 'vue' import Router from 'vue-router' import User from '../pages/user' import Home fro

  • Vue-router的使用和出现空白页,路由对象属性详解

    Vue-router的使用和出现空白页 2018.08.28 更新 vue-router:前端路由系统--改变视图的同时不会向后端发出请求 1. hash 2.history 2018.06.25 更新 get到一个新技能 import Vue from 'vue' import Router from 'vue-router' import api from '../lib/service' //接口文档 Vue.use(Router) const router = { mode: 'hist

  • laravel 配置路由 api和web定义的路由的区别详解

    1.路由经过中间件方面不同 打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware\EncryptCookies::class, \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class, // \Illumina

  • element-ui使用导航栏跳转路由的用法详解

    最近初学vue,试着做一个小项目熟悉语法与思想,其中使用elemen-ui的导航栏做路由跳转切换页面.下面记录一下学习过程 element-ui引入vue项目的用法参考element官网 首先复制官网的例子,在这基础上再修改成我们想要的样子. <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSe

  • Angular路由ui-router配置详解

    简介 angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散,好比Vue提供的组件传值一样,虽然提供给你了用法,但是开发过程中逻辑一多用着萌萌的,所以我们抛开ng-router来看ui-router. 引入ui-router 我们可以去bootCDN搜索ui-router,本地创建js文件,将代码copy进去使用,这样就可以打入本地使用了,但是要注意的是,Angular的main.js一定要在ui-router之前引用,注意一下先后顺序问题. 例如: <s

  • golang常用库之gorilla/mux-http路由库使用详解

    golang常用库:gorilla/mux-http路由库使用 golang常用库:配置文件解析库-viper使用 golang常用库:操作数据库的orm框架-gorm基本使用 一:golang自带路由介绍 golang自带路由库 http.ServerMux ,实际上是一个 map[string]Handler,是请求的url路径和该url路径对于的一个处理函数的映射关系.这个实现比较简单,有一些缺点: 不支持参数设定,例如/user/:uid 这种泛型类型匹配无法很友好的支持REST模式,无

随机推荐