angular路由跳转(笔记)

前端之家收集整理的这篇文章主要介绍了angular路由跳转(笔记)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

这篇严格来说不是自己写的,这里只是记录一下使用的过程(这样是不太好的),前端要学习的东西还有很多。

懒加载模式,用到时再加之,和懒汉式、饿汉式的单例设计模式有些相像(个人看法),首先在index.html文件中引入<app-root>Loading...</app-root>

在app.routes.ts文件中引入使用组件:

  1. import { RouterModule } from '@angular/router';
  2. import { AppComponent } from './app.component';
  3. import { LoginComponent } from './login/login.component';//引入
  4. export const appRoutes = [
  5. {//默认路由
  6. path: '',redirectTo: 'login',pathMatch: 'full'
  7. },{
  8. path: 'login',component: LoginComponent //和上面的import对应,这个不是懒加载,到这里配置了一半
  9. },{
  10. path: 'workspace',loadChildren: './workspace/workspace.module#WorkspaceModule'//懒加载
  11. }
  12. ];

app.module.ts也需要声明一下LoginComponent,还有route的一些配置

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms';
  4. import { HttpModule } from '@angular/http';
  5. import { AppComponent } from './app.component';
  6. import { RouterModule } from '@angular/router';
  7. import { appRoutes } from './app.routes';
  8. import { LoginComponent } from './login/login.component';
  9.  
  10. @NgModule({
  11. declarations: [
  12. AppComponent,LoginComponent
  13. ],imports: [
  14. BrowserModule,FormsModule,HttpModule,RouterModule.forRoot(appRoutes)//刚才的文件export的类
  15. ],bootstrap: [AppComponent]
  16. })
  17. export class AppModule { }

懒加载模式进入

刚才的route文件中配置了workspace,其对应的配置文件是:

  1. import { WorkspaceComponent } from './workspace.component';
  2.  
  3. export const workspaceRoutes = [
  4. {
  5. path: '',component: WorkspaceComponent,children: [
  6. // 默认路由
  7. { path: '',redirectTo: '',pathMatch: 'full' },/********************************************************************* */
  8. // 添加通知
  9. {path: 'add-inform',loadChildren: './add-inform/add-inform.module#AddInformModule' }
  10. ]
  11. }
  12. ];


对应的module是,设置了一些路由

  1. import { NgModule } from '@angular/core';
  2. import { CommonModule } from '@angular/common';
  3. import { WorkspaceComponent } from './workspace.component';
  4. import { RouterModule } from '@angular/router';
  5. import { workspaceRoutes } from './workspace.routes';
  6.  
  7. @NgModule({
  8. imports: [
  9. CommonModule,RouterModule.forChild(workspaceRoutes) //路由
  10. ],declarations: [WorkspaceComponent]
  11. })
  12. export class WorkspaceModule { }

在workspace路由文件中配置了add-inform的配置,其对应的路由文件是:

  1. import {AddInformComponent} from './add-inform.component';
  2.  
  3. export const addInformRoutes=[
  4. //默认路由
  5. {path:'',pathMath:'full',redirectTo:'add-inform'},//新增通知
  6. {path:'add-inform',component:AddInformComponent}
  7. ]
add-inofrm的module文件需要声明其对应的component文件,这个在用ng g c ** 的时候回自动配置

至此、流程算完了,过程组长给了很多帮助,向大神学习,终究会成为大神吧

猜你在找的Angularjs相关文章