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

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. copy代码(含static对象)留下的致命错误

    本来以为这个bug快改不好了,然而发现了问题所在 copy代码没有完全改掉对象名称,导致对象重复创建了,由于是static所以debug过程中 注释了addProperty(gridRowDetail ...

  2. leetcode算法:Reshape the Matrix

    In MATLAB, there is a very useful function called 'reshape', which can reshape a matrix into a new o ...

  3. Java 高级开发必修知识---反射

    Class类的使用 1) 在面向对象的世界里,万事万物皆对象 A. Java语言中,普通数据类型,静态成员不是对象,其他皆对象 B. 每一个类也是对象 C. 类是java.lang.Class类的实例 ...

  4. 判断字符串的后缀.endswith()

    可以用str.endswith('.jpg')来判断字符串是否以jpg结尾,返回True或者False

  5. javaIO操作之字节输出流--OutputStream

    OutputStream /** * <li>输出单个字节:public abstract void write(int b) throws IOException ; * <li& ...

  6. java中抽象类和接口之间的异同点

      抽象类 接口 声明方式 abstratc class ClassName interface ClassName 包含内容 构造方法,普通方法,抽象方法.static方法 .变量常量 全局常量.抽 ...

  7. [LeetCode] Longest Line of Consecutive One in Matrix 矩阵中最长的连续1

    Given a 01 matrix M, find the longest line of consecutive one in the matrix. The line could be horiz ...

  8. [LeetCode] IPO 上市

    Suppose LeetCode will start its IPO soon. In order to sell a good price of its shares to Venture Cap ...

  9. 【阿里聚安全·安全周刊】互联网时代人类还有被遗忘的权利吗 | Android与中兴

    本周七个关键词:互联网时代丨中兴和Android丨安卓厂商和安全补丁丨移动支付安全丨泰国移动运营商泄密丨格式化硬盘的恶意程序丨代码签名滥用 -1-   [互联网] 互联网时代 人类还有被遗忘的权利吗 ...

  10. Python的hasattr() getattr() setattr() 函数使用方法详解 (转)

    来自:https://www.cnblogs.com/cenyu/p/5713686.html hasattr(object, name)判断一个对象里面是否有name属性或者name方法,返回BOO ...