路由，简单的来说就是让组件之间进行跳转和参数的传递。

1、先在app目录下创建一个名为app.route.ts的路由组件

2、打开app.route.ts 在里面创建路由组件的代码（可通过编辑器快捷生成）

3、开始配置路由词典，引入对应的组件

4、把代码中的forChild 改成forRoot

5、最后导出为AppRoutingModule

6、在app目录下找到app.module.ts

7、最后一步，打开app.component.ts，添加<router-outlet></router-outlet>

做完以上这几步，路由就算是配置成功，可以使用了

　　

Angular 路由配置的更多相关文章

  1. angular路由配置以及使用

    一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...

  2. angular路由配置用法

      在如今,很多事用于HTML5嵌套在webview,成为(伪)app,用a链接来跳转,简单页面来说的话,速度还是可以的,但是应用越来越多,是用不流畅,当然原生的app像安卓以及IOS来说的话,跳转是 ...

  3. angular 路由项目例子

    angular 路由是我在工作中体验非常便捷的一点, 这是详细的API ,查看API 可以了解很多东西, https://github.com/angular-ui/ui-router/wiki/Qu ...

  4. angular 8 配置路由

    一.生成路由文件 按照惯例,有一个独立模块来配置相关路由,这个模块类的名字叫做AppRoutingModule,位于src/app下的app-routing.module.ts文件中. 使用CLI生成 ...

  5. angular路由详解：

    1.$routeProvider ngRoute模块中的服务 2.otherwise:设置用于路由改变时,与任何其他定义的路由无法匹配的时候执行的代码 3.when:为$route服务定义新的路由 例 ...

  6. angular路由

    ngRoute需要引进以下文件 <script src="http://code.angularjs.org/1.2.5/angular.min.js"></sc ...

  7. angular2地址栏路由配置

    一步一步route过去可以,地址栏直接写url怎么就找不到了呢? 这关乎于Nodejs的express路由规则(http://hm4123660.iteye.com/blog/2195035) exp ...

  8. angular路由参数说明

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...

  9. angular路由详解六（路由守卫）

    路由守卫 CanActivate: 处理导航到某个路由的情况. CanDeactivate:处理从当前路由离开的情况. Resole:在路由激活之前获取路由数据. 1.CanActivate: 处理导 ...

随机推荐

  1. Jmeter入门（01）Jmeter的下载和安装

    一.什么是Jmeter 1.一款优秀的.开源的.免费的.功能测试和性能测试 工具 Jmeter ,使用Java开发的一款优秀的开源免费测试工具,主要用来做功能测试和性能测试(压力测试/负载测试),用J ...

  2. Excel 日期截取（函数）

    需求:时间段截取,去掉年月日,保留时分. 实现函数:    =TEXT(A2,"HH:MM")&"-"&TEXT(B2,"HH:MM& ...

  3. Linux将端口设置进防火墙的白名单

    1.先检查linux服务器的端口是否被防火墙拦住 `telnet 172.168.1.101 8080后面跟端口号,如果连接上证明是防火墙白名单.如果没有配置 vi /etc/sysconfig/ip ...

  4. hdu1443 Joseph---约瑟夫环

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1443 题目大意: 一共有2k个人,分别为k个好人和k个坏人,现在我们需要每隔m个人把坏人挑出来,但是 ...

  5. ansible批量加用户

    ansible批量加用户 1.生成密码 pip install passlib python -c "from passlib.hash import sha512_crypt; print ...

  6. Collections、Arrays 简明

    Collections : 它的出现给集合操作提供了更多的功能.这个类不需要创建对象,内部提供的都是静态方法. 一般方法 Collections. sort (list); list 集合进行元素的自 ...

  7. [原创软件]Maya语言切换工具

    软件主要功能: 切换Maya语言 软件界面截图: 开发环境及语言: c# .NET Framework 4.0 Visual Studio 2015 更新日志: v1.0(2016.7.20) 发布初 ...

  8. Myeclipse修改设置Default VM Arguments

    打开Windows-> Preferences 然后选择右侧菜单的Java->Installed JREs 点击右侧的jdk,然后点击"Edit"按钮 Default ...

  9. [LeetCode] Can Place Flowers 可以放置花

    Suppose you have a long flowerbed in which some of the plots are planted and some are not. However, ...

  10. 【Swift】swift中使用kvc赋值的时候，注意事项

    swift中使用kvc赋值的时候.假如给基础数据类型赋值,必须先给基础数据类型的变量一个初始值. 否则将会报错. var setValue(dict["id"], forKey: ...