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标号
			
    标号用于控制循环执行流程: public static void main(String[] args) { mark: for(int i = 0; i < 3; i++) { System. ...
    
			
    2. 
						
  2. JavaScript运算符：递增递减运算符前置和后置的区别
			
    从两段代码说起 var num1 = 2; var num2 = 20; var num3 = --num1 + num2; var num4 = num1 + num2; console.log(n ...
    
			
    3. 
						
  3. PHP:第四章——PHP数组处理函数
			
    <pre> <?php //数组处理函数 header("Content-Type:text/html;charset=utf-8"); //compact(); ...
    
			
    4. 
						
  4. UVALive 2318 水题
			
    给出c 个竞争者.v 个投票人.每个投票人的投票顺序.问你谁会胜出.在第几轮.完全是个水题.比赛的时候debug接近两个点没过.因此差点放弃了整场比赛.猜测是错在找最大和第二大的序号哪里错的.因为我换 ...
    
			
    5. 
						
  5. 关系数据库ORMlite的用法；
			
    首先要在 http://ormlite.com/releases 页面下载两个jar 包: (1)core列表下的jar包: (2)android列表下的jar包. 将上面的两个jar包下载后放到An ...
    
			
    6. 
						
  6. Enginering English for interview （1）
			
    I was lucky to work in a foreign company, Here is an overview of the interview test : 1.Because of t ...
    
			
    7. 
						
  7. 接口测试之postman-简单使用
			
    Postman功能(https://www.getpostman.com/features) 主要用于模拟网络请求包 快速创建请求 回放.管理请求 快速设置网络代理 安装 下载地址:https://w ...
    
			
    8. 
						
  8. HDU 3546
			
    http://acm.hdu.edu.cn/showproblem.php?pid=3546 题意:10个寄存器初值为1,有加乘赋值运算,最多30w次运算,大数最多5000位,问最后10个寄存器的结果 ...
    
			
    9. 
						
  9. linux下源码安装jdk1.8和tomcat8.5
			
    Java是目前可移植性较高的语言,相当火热,tomcat运行就需要Java语言环境 0.java简介 1)tomcat运行需要对应的Java环境,Java环境通过安装jdk来获得2)为了防止兼容性问题 ...
    
			
    10. 
						
  10. length()
			
    在MATLAB中: size:获取数组的行数和列数 length:数组长度(即行数或列数中的较大值) numel:元素总数. s=size(A),当只有一个输出参数时,返回一个行向量,该行向量的第一个 ...
    
			
    11.