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. Activiti工作流笔记（3）
			
    Activiti工作流的流程部署和删除流程部署 流程部署代码: /** * 部署流程 */ public class ActivitiTest { RepositoryService reposito ...
    
			
    2. 
						
  2. 【转】C# 生成二维码并且在中间加Logo（图片合并）
			
    public class QRCodeHelper { public static Bitmap GetThumbnail(Bitmap b, int destHeight, int destWidt ...
    
			
    3. 
						
  3. Py打包exe报错
			
      Py打包exe报错       下载地址 https://github.com/pyinstaller/pyinstaller       用管理员执行   pip install https:/ ...
    
			
    4. 
						
  4. POJ 1947 Rebuilding Roads 树形dp 难度:2
			
    Rebuilding Roads Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 9105   Accepted: 4122  ...
    
			
    5. 
						
  5. C语言 string::size_type类型
			
    string::size_type类型 从逻辑上来讲,size()成员函数似乎应该返回整型数值,或如2.2节“建议”中所述的无符号整数.但事实上,size操作返回的是string::size_type ...
    
			
    6. 
						
  6. SSH框架下载地址
			
    Struts各版本下载地址: https://dist.apache.org/repos/dist/release/struts/ Spring各版本下载地址: http://repo.spring. ...
    
			
    7. 
						
  7. Spring学习笔记之Container overview
			
    The Spring IoC container
    
			
    8. 
						
  8. Linux->卸载Mysql方法总结
			
    如何在Linux下卸载MySQL数据库呢? 下面总结.整理了一下Linux平台下卸载MySQL的方法. MySQL的安装主要有三种方式:二进制包安装(Using Generic Binaries).R ...
    
			
    9. 
						
  9. oracle获取执行计划及优缺点 详解
			
    一.获取执行计划的6种方法(详细步骤已经在每个例子的开头注释部分说明了):1. explain plan for获取: 2. set autotrace on : 3. statistics_leve ...
    
			
    10. 
						
  10. 逆向路由器固件之敏感信息泄露 Part2
			
    之前的文章中详细介绍了各种解包路由器固件的工具.解包之后就获得了固件中的文件.下一步就是分析文件寻找漏洞了.这次分析的目标是Trendnet路由器,分析的漏洞是一个远程获取路由器权限的漏洞. 初步分析 ...
    
			
    11.