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. iOS UI-QQ聊天布局
			
    一.Model BWMessage.h #import <Foundation/Foundation.h> typedef enum{ BWMessageMe = ,//表示自己 BWMe ...
    
			
    2. 
						
  2. 管道pipe与dup结合使用，应用实例
			
    管道的一种常见用法:在父进程创建子进程后向子进程传递参数.例如,一个应用软件有一个主进程和很多个不同子进程. 主进程创建子进程后,在子进程调用exec函数执行一个新程序前,通过管道给即将执行的程序传递 ...
    
			
    3. 
						
  3. 桥接、nat、host-only
			
    
			
    4. 
						
  4. httpclient RequestConfig类
			
    RequestConfig类解析 这个类位于org.apache.he.http.client.config包下,主要用于获取和配置一些外部的网络环境,它下面有一个嵌套类RequestConfig.B ...
    
			
    5. 
						
  5. 什么是REST API?
			
    REST指一组架构约束条件和原则,满足约束条件和原则的应用程序设计.架构,软件体系结构分为三部分:构建,用于描述计算机:连接器,用于描述构建的链接部分:配置将构建和连接器组成有机整体.web基本技术: ...
    
			
    6. 
						
  6. PHP excel reader , excel时间转成php时间格式
			
    最近,在做一个导入功能,在系统中使用PHPExcel类库,读取上传的Excel文件,然后进行字段映射,最后将Excel内的数据导入到系统中.其中,关于日期格式的导入,使我犯了难. 首先,如何导入日期, ...
    
			
    7. 
						
  7. html内容滚动
			
    <marquee srolldelay="50" direction="up"></marquee> 滚动标签<marquee&g ...
    
			
    8. 
						
  8. jQuery 禁用select和取消禁用之disabled
			
    jQuery1.5及以前: 禁用select: $('#groupId').attr('disabled','disabled'); 取消禁用: $('#groupId').removeAttr('d ...
    
			
    9. 
						
  9. 可远程定位、解锁并启动汽车的黑客设备OwnStar
			
    GM告诉WIRED,OnStar用户不必担心之前存在的问题,现在已经修复了之前可被利用的漏洞,. 然而,Kamkar表示问题还是没有被解决,并且已经由GM汇报了该问题. 在任何已经连接的汽车上,GM的 ...
    
			
    10. 
						
  10. windows server 账号克隆
			
    在dos命令行下隐藏用户的方法:   net user 账户 密码 /add 如果在账号后加 $ 符号 这个账户在cmd命令行下是无法看见的 首先我们设置注册表权限 cmd = > regedt ...
    
			
    11.