Angular 4 路由介绍

时间:2022-01-24 03:34:40

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 路由介绍