热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

Angular2路由问题修复详解

这篇文章主要介绍了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命令。

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


推荐阅读
  • 秒建一个后台管理系统?用这5个开源免费的Java项目就够了
    秒建一个后台管理系统?用这5个开源免费的Java项目就够了 ... [详细]
  • Bootstrap 支持用户自定义样式调整。即使长时间未使用 Bootstrap,也可以通过添加新的 CSS 类或覆盖现有类来轻松修改默认样式,以满足特定的设计需求。 ... [详细]
  • 在CentOS 7上部署WebRTC网关Janus
    在CentOS 7上部署WebRTC网关Janus ... [详细]
  • 在订单服务启动过程中,首先会从Eureka服务器中查找已注册的配置中心,随后从Gitee配置仓库中获取特定的 `order-test.yml` 文件,以确保服务能够正确加载所需的配置信息。这一流程保证了配置管理的灵活性和可维护性。 ... [详细]
  • 如何撰写PHP电商项目的实战经验? ... [详细]
  • 深入解析Spring Boot启动过程中Netty异步架构的工作原理与应用
    深入解析Spring Boot启动过程中Netty异步架构的工作原理与应用 ... [详细]
  • Datepicker Localization for English (UK) Fails to Function Correctly ... [详细]
  • 在Linux环境下编译安装Heartbeat时,常遇到依赖库缺失的问题。为确保顺利安装,建议预先通过yum安装必要的开发库,如glib2-devel、libtool-ltdl-devel、net-snmp-devel、bzip2-devel和ncurses-devel等。这些库是编译过程中不可或缺的组件,能够有效避免编译错误,确保Heartbeat的稳定运行。 ... [详细]
  • Java中高级工程师面试必备:JVM核心知识点全面解析
    对于软件开发人员而言,随着技术框架的不断演进和成熟,许多高级功能已经被高度封装,使得初级开发者只需掌握基本用法即可迅速完成项目。然而,对于中高级工程师而言,深入了解Java虚拟机(JVM)的核心知识点是必不可少的。这不仅有助于优化性能和解决复杂问题,还能在面试中脱颖而出。本文将全面解析JVM的关键概念和技术细节,帮助读者全面提升技术水平。 ... [详细]
  • 六个接私活的平台,技术在手,财富自由!值得推荐给每一位专业人士!
    本文将介绍六个适合专业人士接私活的平台,帮助技术人才实现财富自由。这些平台不仅提供了丰富的项目机会,还为用户搭建了高效的合作桥梁,是每位技术人士不容错过的资源。 ... [详细]
  • 深入解析Spring框架中的双亲委派机制突破方法
    在探讨Spring框架中突破双亲委派机制的方法之前,首先需要了解类加载器的基本概念。类加载器负责将类的全限定名转换为对应的二进制字节流。每个类在被特定的类加载器加载后,其唯一性得到保证。然而,这种机制在某些场景下可能会限制灵活性,因此Spring框架提供了一些策略来突破这一限制,以实现更加动态和灵活的类加载。这些策略不仅能够提升系统的可扩展性,还能在复杂的运行环境中确保类的正确加载和管理。 ... [详细]
  • 本文深入探讨了Bootstrap网格布局系统的高级应用,重点解析了`.col-md-4`类的基本用法及其在响应式设计中的灵活运用。通过实例分析,详细阐述了如何利用该类实现多设备适配的页面布局,为开发者提供了宝贵的实践指导。 ... [详细]
  • 无法将文件下载到AWSLambda ... [详细]
  • 适用于 SSR/WASM 的 ZXing Blazor 扫码组件,高效集成与优化
    本项目基于 ZXing 封装了适用于 SSR 和 WASM 的 Blazor 扫码组件,能够高效地集成到 Blazor 应用中,并支持通过手机或桌面电脑的摄像头进行扫码操作。该组件库不仅简化了开发流程,还提供了高性能的扫码体验。项目地址:[链接] ... [详细]
  • 数据科学笔记26:深入解析随机森林分类算法及其在Python和R中的应用
    ### 摘要随机森林是一种在集成学习领域备受推崇的算法,被誉为“集成学习技术的典范”。该方法因其简洁性、易实现性和较低的计算成本而被广泛应用。本文将深入探讨随机森林的工作原理,特别是其在Python和R中的具体应用。随机森林通过结合多个决策树和Bagging技术,有效提高了模型的准确性和鲁棒性。我们将详细解析其核心机制,并通过实际案例展示如何在不同编程环境中高效实现这一强大的分类算法。 ... [详细]
author-avatar
Min2502857657_377
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有