work hard work smart

专注于Java后端开发。 不断总结,举一反三。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Angular 4 路由介绍

Posted on 2017-08-14 11:55  work hard work smart  阅读(245)  评论(0编辑  收藏  举报

Angular 4 路由

1. 创建工程

ng new router --routing

 

2. 创建home和product组件

ng g component home

ng g component product

 

3. 配置路由

 

4. 主页面导航

 

二、按钮事件中实现导航

toProductdetails方法如下

 

三、不存在的页面

如果页面不存在,则需要创建一个404的页面

1. 创建组件

ng g component code404

2.添加路由

3.页面中提示页面不存在

4. 效果图