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.lang.string  split 以点分割字符串无法正常拆分字符串
			
    //错误的做法String ip="192.168.11.23"; String[] spstr_IP=ip.split(".");//这种方式无法拆分在ip字 ...
    
			
    2. 
						
  2. Kubernetes设计架构
			
    官方文档:https://www.kubernetes.org.cn/doc-11 Kubernetes集群包含有节点代理kubelet和Master组件(APIs, scheduler, etc), ...
    
			
    3. 
						
  3. Windows各种各种消息投递函数
			
    1.SendMessage:发送消息给指定的窗口过程:直到窗口过程处理了消息才返回. 2.PostMessage:将消息放入消息队列(与指定窗口创建的线程相关)中:无需等待消息处理,立即返回.   不 ...
    
			
    4. 
						
  4. learning docker steps(7)  ----- docker registry 搭建
			
    参考: https://docs.docker.com/engine/reference/builder/ https://hub.docker.com/_/registry/ https://www ...
    
			
    5. 
						
  5. .net WebService方法之重载、支持Session、支持request请求和response格式的浅析
			
    .net的webservice不支持web方法的重载,但是可以通过设置WebMethod属性的MessageName字段来达到重载web方法的目的. 通过设置WebMethod属性的EnableSes ...
    
			
    6. 
						
  6. iOS调用第三方地图App进行导航方法
			
    前言 App内根据手机上装载的地图App将其显示在弹出的选择框,选择对应地图跳转进入地图导航.需要用到- (BOOL)canOpenURL:(NSURL *)url NS_AVAILABLE_IOS( ...
    
			
    7. 
						
  7. gulp 系统教程
			
    移步: http://www.cnblogs.com/2050/p/4198792.html gulp外挂 加md5   版本号 自动合并图片并修改css的坐标 一个系统列子 gulp可以做哪些事情
    
			
    8. 
						
  8. kbmMW CopyRawRecords 用法
			
    复制一个ClientQuery数据集到另外一个ClientQuery,我们应该怎么做?并注意什么呢? kbmMW为我们提供了好几个方法,有LoadFromDataSet,CopyRawRecords, ...
    
			
    9. 
						
  9. 源代码管理：SVN源代码管理器在ASP.NET VS中的使用注意事项
			
    一共有三个软件 1.ASP.NET下SVN有三个是不受管理的,bin文件夹,obj文件夹,.user类型文件,位置在TortoiseSVN的Settings下面的Subversion下的[Global ...
    
			
    10. 
						
  10. Android 获取联系人和电话号码
			
    获取联系人和电话号码 private void queryContactPhoneNumber() { String[] cols = {ContactsContract.PhoneLookup.DI ...
    
			
    11.