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. cas HttpServletRequestWrapperFilter
			
    HttpServletRequestWrapperFilter 作用其实很简单就是 在HttpServletRequest对象在包装一次,让其支持getUserPrincipal,getRemoteU ...
    
			
    2. 
						
  2. Awk 从入门到放弃（3） —- 内置变量
			
    转:http://www.zsythink.net/archives/1374 NF :当前行的字段个数 NR:  行号 FNR: 各文件分别计数的行号 RS: 输入行分隔符 ORS:输出行分隔符 内 ...
    
			
    3. 
						
  3. docker（二）不管怎么样，先跑起来。运行一个samba，运行一个hello world。
			
    ---恢复内容开始--- 继续上一篇文章 访问https://hub.docker.com/r/jackadam/samba/ 这是我写的一个docker镜像. 下面有 无脑测试用: docker r ...
    
			
    4. 
						
  4. L1-038 新世界
			
    这道超级简单的题目没有任何输入. 你只需要在第一行中输出程序员钦定名言“Hello World”,并且在第二行中输出更新版的“Hello New World”就可以了. 输入样例: 无 输出样例: H ...
    
			
    5. 
						
  5. 玩转X-CTR100 l STM32F4 l U-Blox NEO-6M GPS卫星定位-nmealib解码库移植解码
			
    我造轮子,你造车,创客一起造起来!塔克创新资讯[塔克社区 www.xtark.cn ][塔克博客 www.cnblogs.com/xtark/ ]      本文介绍X-CTR100控制器 扩展GPS ...
    
			
    6. 
						
  6. SaltStack自动化运维工具
			
    一.SaltStack的了解 SaltStack管理工具允许管理员对多个操作系统创建一个一致的管理系统,包括VMware vSphere环境. SaltStack作用于仆从和主拓扑.SaltStack ...
    
			
    7. 
						
  7. php file文件操作函数
			
    filemtime() 函数: filemtime() 函数返回文件内容上次的修改时间. 若成功,则时间以 Unix 时间戳的方式返回.若失败,则返回 false. <?php echo fil ...
    
			
    8. 
						
  8. Eclipse之NDK编译-- Type 'jint' could not be resolved, and JNIEnv, jclass错误解决办法
			
    最近在研究面部识别美白相关的功能.使用的是opencv,就去研究了.今天正好有空就把安装了ndk,安装完成之后就试图去编译demo程序,hellow-jni c代码,一开始编辑就报错了3个错误信息:  ...
    
			
    9. 
						
  9. 强化学习   CartPole实验的一些启发    有没有可能设计一个新的实验呢？（杆子可以向360度方向倾倒，可行吗？）
			
    最近在看强化学习方面的东西,突然想到了这么一个事情,那就是经典的CartPole游戏我们改变一下,或者说升级一下,那么使用强化学习是否能得到不错的效果呢? 原始游戏如图: 一点个人的想法: ===== ...
    
			
    10. 
						
  10. 如何在Struts2的拦截器中调用Spring容器
			
    第一种: 通常用ApplicationContext来调用Spring配置文件中的一些Bean,所以首先创建Spring上下文容器. ApplicationContext ac = (Applicat ...
    
			
    11.