Angular 4 路由介绍

Angular 4 路由

1. 创建工程

ng new router --routing

 

2. 创建home和product组件

ng g component home

ng g component product

 

3. 配置路由

Angular 4 路由介绍

 

4. 主页面导航

Angular 4 路由介绍

 

二、按钮事件中实现导航

Angular 4 路由介绍

toProductdetails方法如下

Angular 4 路由介绍

 

三、不存在的页面

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

1. 创建组件

ng g component code404

2.添加路由

Angular 4 路由介绍

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

Angular 4 路由介绍

4. 效果图

Angular 4 路由介绍

 


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/p/7356312.html,如需转载请自行联系原作者