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连接MySql数据库 zeroDateTimeBehavior
			
    JAVA连接MySQL数据库,在操作值为0的timestamp类型时不能正确的处理,而是默认抛出一个异常, 就是所见的:java.sql.SQLException: Cannot convert va ...
    
			
    2. 
						
  2. quartz---springmvc的配置文件正合
			
    quartz---springmvc的配置文件正合 XML <beans xmlns="http://www.springframework.org/schema/beans" ...
    
			
    3. 
						
  3. laravel中通过查询构造器，实现数据的curd
			
    //查询构造器: public function query1(){ //利用查询构造器,插入数据: /*$num=DB::table('student')->insert( ['name'=& ...
    
			
    4. 
						
  4. 如何搭建.NET Entity Framework分布式应用系统框架
			
    一.             前言 ADO.NET Entity Framework(以下简称EF)是微软推出的一套O/RM框架,如果用过Linq To SQL的人会比较容易理解,因为Linq To  ...
    
			
    5. 
						
  5. RTU命令设置笔记
			
    YN+12VCTL=1 配置+12V输出控制模式:永久输出YN+5VCTL=1 配置+5V输出控制模式:永久输出 YN+GETDATA 读取采样值 YN++LIST 获取设置参数列表 YN+LOAD  ...
    
			
    6. 
						
  6. jquery条形码生成器
			
    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...
    
			
    7. 
						
  7. delphi image控件上画矩形的问题
			
    画的时候发现鼠标点的位置和矩形的位置有偏移 后来查看发现是由于image控件时stretch属性设置为true,这样在画的时候是缩放了的 也就是画到image显示的图片上去了 所以如果要画矩形,要按照 ...
    
			
    8. 
						
  8. 1022 D进制的A+B
			
    输入两个非负 10 进制整数 A 和 B (≤2^​30​​−1),输出 A+B 的 D (1<D≤10)进制数. 输入格式: 输入在一行中依次给出 3 个整数 A.B 和 D. 输出格式: 输 ...
    
			
    9. 
						
  9. 用UILabel实现文字滚动播放（跑马灯）效果
			
    - (void)viewDidLoad { [super viewDidLoad]; //数据源 self.messageArray = [NSArray arrayWithObjects: &quo ...
    
			
    10. 
						
  10. DevExpress v18.1新版亮点——ASP.NET篇（一）
			
    用户界面套包DevExpress v18.1日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了DevExpress ASP.NET v18.1 的新功能,快来下载试用新版本!点 ...
    
			
    11.