zoukankan      html  css  js  c++  java
  • angular路由模块(二)

    上一章写的是如何创建一个简单的路由,这一样我们来看看如何创建一个路由模块。angular的思想就是(模块,组件,子组件.....)。

    我们在src/app目录下创建一个跟路由模块app-routing.module.ts文件。

    import { NgModule } from '@angular/core';

    import { RouterModule, Routes }  from '@angualr/router';//引入路由模块

    import { CrisisListComponent } from './crisis-list.component';

    import { HeroListComponent } from './hero-list.component';

    //创建路由数组

    const routes:Routes = [

    { path: 'crisis-center', component: CrisisListComponent },

    { path: 'heroes', component: HeroListComponent },

    { path: '', redirectTo: '/heroes', pathMatch: 'full' },

    ];

    @ngModule({

    imports:[RouterModule.forRoot(routes)],//路由配置

    exports:[RouterModule] //一定要记得这个导出,不然会报错,

    })

    export class AppRoutingModule {

    }

    //把app.module.ts文件中的路由部分删除,添加app-routing.module.ts模块

    import { AppRoutingModule }  from './app-routing.module';

    @NgModule({

    imports:[AppRoutngModule]

    })

    这样就完成了,angular的路由模块化,但是这个模块还是在根路由,并没有说配置子路由,下节再说子路由实现。

    每一步都是一个深刻的脚印
  • 相关阅读:
    web component的理解
    cdn
    const 命令
    let 的含义,及let 与 var 的区别
    选择器
    Qt5:Qt中一些函数功能介绍
    给软件工程师自学的建议
    Qt5:渐变效果的实现
    Wayland软件库 :替代 X Window 的软件库
    Qt5:窗口各类位置
  • 原文地址:https://www.cnblogs.com/chzlh/p/7615288.html
Copyright © 2011-2022 走看看