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. 效果图

												


											
Angular 4 路由介绍的更多相关文章
	

    
								
  1. node之路由介绍
		
    路由介绍 ----路由是指向客户端提供它所发出的请求内容的机制:----对基于 Web 的客户端 / 服务器端程序而言,客户端在 URL 中指明它想要的内容,具体来说就是路径和查询字符串 下面我看看一 ...
    
		
    2. 
						
  2. angular -- ng-ui-route路由及其传递参数？script标签版
		
    考虑到 多视图等因素,所以 angular 的路由考虑使用 ng-ui-route来做,而不使用 ng-route来做! <!DOCTYPE html> <html lang=&qu ...
    
		
    3. 
						
  3. angular 之路由
		
    1.用angular-cli建一个工程自带路由怎么做? 命令:ng new  项目名 --routing 2.怎么使用路由器和路由器的一些基本使用. //html页面 <a routerLink ...
    
		
    4. 
						
  4. angular 前端路由不生效解决方案
		
    angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
    
		
    5. 
						
  5. Angular配置路由以及动态路由取值传值跳转
		
    Angular配置路由 1.找到 app-routing.module.ts 配置路由 引入组件 import { HomeComponent } from './home/home.componen ...
    
		
    6. 
						
  6. angular路由介绍
		
    AngularJS路由功能是一个纯前端的解决方案,与我们熟悉的后台路由不太一样.后台路由,通过不同的URL会路由到不同的控制器上(controller),再渲染(render)到页面(HTML).An ...
    
		
    7. 
						
  7. angularjs中的路由介绍详解 ui-route(转)
		
    http://www.cnblogs.com/littlemonk/p/5500801.html 这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui rou ...
    
		
    8. 
						
  8. [转]angular的路由机制
		
    在谈路由机制前有必要先提一下现在比较流行的单页面应用,就是所谓的single page APP.为了实现无刷新的视图切换,我们通常会用ajax请求从后台取数据,然后套上HTML模板渲染在页面上,然而a ...
    
		
    9. 
						
  9. angularjs中的路由介绍详解  ui-route
		
    这篇文章主要介绍了Angularjs中UI Router全攻略,涉及到angularjs ui router的基本用法,需要的朋友参考下吧   首先给大家介绍angular-ui-router的基本用 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. java容器——Collection接口
			
    Collection是Set,List接口的父类接口,用于存储集合类型的数据. 2.方法 int size():返回集合的长度 void clear():清除集合里的所有元素,将集合长度变为0 Ite ...
    
			
    2. 
						
  2. Oracle数据库的“健康指示器”——事件（events）
			
    Oracle数据库“赢在”在架构,这话还是有道理的,除了锁(lock)这个最大的架构上的“赢点”之外,Oracle事件(event)也是另外一个很重要的架构上的“赢点”,因为当今的Oracle数据库, ...
    
			
    3. 
						
  3. @Component 元注解
			
    @Component 元注解 这是一个元注解,意思是它可以用于标注其他注解,被它标注的注解和它起到相同或者类似的作用.Spring用它定义了其他具有特定意义的注解如@Controller @Servi ...
    
			
    4. 
						
  4. CCF CSP 201703
			
    CCF CSP 2017·03 做了一段时间的CCF CSP试题,个人感觉是这样分布的 A.B题基本纯暴力可满分 B题留心数据范围 C题是个大模拟,留心即可 D题更倾向于图论?(个人做到的D题基本都是 ...
    
			
    5. 
						
  5. DevExpress v17.2新版亮点—WinForms篇（一）
			
    用户界面套包DevExpress v17.2终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.开篇介绍了DevExpress WinForms v17.2 Data Grid Control  ...
    
			
    6. 
						
  6. MyEclipse 10 中安装Android ADT 22插件的方法
			
    MyEclipse 10 中安装Android ADT 22插件的方法 下载ADT包:http://dl.google.com/android/ADT-22.0.0.zip 将ADT-22.0.0.z ...
    
			
    7. 
						
  7. 一起来点React Native——常用组件之Text
			
    一.什么是Text组件? 一个用于显示文本的React组件,和Android中的TextView组件或者OC中的Label组件相类似,专门用来显示基本的文本信息:除了基本的显示布局之外,可以进行嵌套显 ...
    
			
    8. 
						
  8. 基于TextRank提取关键词、关键短语、摘要
			
    一.TextRank原理 TextRank是一种用来做关键词提取的算法,也可以用于提取短语和自动摘要.因为TextRank是基于PageRank的,所以首先简要介绍下PageRank算法. 1. Pa ...
    
			
    9. 
						
  9. 5.1  socket编程、简单并发服务器
			
    什么是socket? socket可以看成是用户进程与内核网络协议栈的编程接口.是一套api函数. socket不仅可以用于本机的进程间通信,还可以用于网络上不同主机间的进程间通信. 工业上使用的为t ...
    
			
    10. 
						
  10. int类型转string类型c++
			
    前言 使用VS的过程中,经常会用到需要将int类型数据转换为字符串类型,便于显示信息等. 实现方法 c++11标准中的to_string函数,在VS安装文件的include文件中生成的只读文件,使用起 ...
    
			
    11.