时间:2021-05-28
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命令。
会什么会出现这个问题?欢迎大家交流。下篇我会专门解释这个问题的答案
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
angular2里默认切换路由或者切换组件,页面的title是不会变化的。angular2在路由设置里提供了data参数可以传值,如下{path:'home',
本文实例讲述了Angular2使用路由自定义弹出组件toast操作。分享给大家供大家参考,具体如下:原理:使用Angular2的命名路由插座,一个用来显示app
准备Angular2环境ng-bootstrap是基于Angular2的,因此需要先准备Angular2的环境。使用ng-bootstrap下载ng-boots
angular2子组件的事件传递angular2有很多组件组成,画面由很多路由,导致事件的传递很“笨拙”,本组的技术负责人发现了任意组件传递事件的这个方法,教会
实现ng2-router路由,嵌套路由首先配置angular2的时候router模块已经下载,只需要引入即可import{RouterModule,Routes