[Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?
In this tutorial we are going to learn how we can can configure redirects in the angular 2 router configuration. We are also going to see again another example on how the order of the configuration might trip us. We are going to see the different between path matching in prefix mode vs full mode, and we are going to learn why redirects should be in general configured using full path matching.
Define a auxiliary router in app.routes.ts:
{path: 'wiki-path', loadChildren: 'app/auxroute/auxroute.module', name: 'WikiDetail', outlet: 'wiki'},
app.component.html:
<router-outlet class="main"></router-outlet>
<router-outlet name="wiki" class="right-detail"></router-outlet>
The main difference between noraml router outlet and auxiliary router is auxiliary router has name prop.
url for auxiliary router:
http://localhost:4200/home(wiki:wiki-path)
it contains: (<outlet_name>:<path_name>)

[Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?的更多相关文章
- [Angular2 Router] Auxiliary Routes bit by bit
Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...
- [Angular 2 Router] Configure Your First Angular 2 Route
Using the Angular 2 router requires defining routes, passing them in to the RouterModule.forRoot and ...
- angular当router使用userhash:false时路由404问题
angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...
- [Angular 2] Router basic and Router Params
When we define router in Angualr 2, we use @RouteConcfig() When we want to display component, we use ...
- angular 4 router传递数据三种方法
1.在查询参数中传递数据 <a [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}& ...
- angular ui.router 路由传参数
angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...
- [Angular] Enable router tracing
To enable router tracing is really simple: RouterModule.forRoot(ROUTES, { enableTracing: true }) Whe ...
- 规范 : angular ui router path & params
在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...
- Vue Router的官方示例改造
基于Vue Router 2018年8月的官方文档示例,改造一下,通过一个最简单的例子,解决很多初学者的一个困惑. 首先是官方文档示例代码 <!DOCTYPE html> <html ...
随机推荐
- 《linux 内核全然剖析》编译linux 0.12 内核 Ubuntu 64bits 环境
我×.. . 最终好了,大概3 4个小时吧...各种毛刺问题.终究还是闯过来了.. .. ubuntu2@ubuntu:~/Downloads/linux-0.00-050613/linux-0.00 ...
- 9.9递归和动态规划(六)——打印n对括号的所有有效组合(即左右括号正确配对)
/** * 功能:打印n对括号的所有有效组合(即左右括号正确配对). */ 两种方法: 方法一: /** * 思路:在括号的最前面或者原有的每对括号中面插入一对括号. 至于其它任何位置.比方字符串的 ...
- 操作excel脚本练习
# -*- coding: utf-8 -*- import xlrd import xlwt import sys from xlwt import * from xlrd import open_ ...
- 第一个C#控制台程序
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- 谈谈iframe的优缺点
iframe是一种框架,也是一种很常见的网页嵌入方式,零度今天给大家分析分析它的优缺点. iframe的优点: 1.iframe能够原封不动的把嵌入的网页展现出来. 2.如果有多个网页引用iframe ...
- javafx Hanoi
Netbean java8 source code :http://files.cnblogs.com/files/rojas/HNT.zip screenshot: 1 model /* ...
- SASS常用方法
cnpm install --save-dev sass-loader //sass-loader依赖于node-sass cnpm install --save-dev node-sass //实现 ...
- Python day3 知识总结
if salary.isdigit(): salary = int(salary)判断输入的salary是否是一个整数是否成立 for index,item in enumerate(product_ ...
- CMDB学习之四 ——DEBUG模式
定义一个debug,进行解析调试,到测试文件 配置文件,配置debug模式,定义环境变量, #!/usr/bin/env python # -*- coding:utf-8 -*- import os ...
- Linux下的led驱动程序,ok6410
本程序採用动态映射的方法控制led.硬件平台为飞凌的ok6410 led.h:定义控制命令 #ifndef _LED_H #define _LED_H #define LED_MAGIC 'M' #d ...