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?的更多相关文章

  1. [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 ...

  2. [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 ...

  3. angular当router使用userhash:false时路由404问题

    angular当router使用userhash:false时路由404问题 安装iis urlrewrite2.0组件 在根目录下创建 Web.config <configuration> ...

  4. [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 ...

  5. angular 4 router传递数据三种方法

    1.在查询参数中传递数据 <a  [routerLink]="['/product']" [queryParams]="{id:1,name:'dongian'}& ...

  6. angular ui.router 路由传参数

    angular已经用了一段时间了,最近在做路由,做一下笔记. 路由跳转的时候进行穿参 ui.router方式 <a ui-sref="edit({id:5})"> 编辑 ...

  7. [Angular] Enable router tracing

    To enable router tracing is really simple: RouterModule.forRoot(ROUTES, { enableTracing: true }) Whe ...

  8. 规范 : angular ui router path & params

    在seo文章中提到url的path 必须是 why-us,而不是whyUS 所以定了规范,所有的path 必须why-us path ?后尾的是用来filter的,所以可以WhyUs 如果是不需要给s ...

  9. Vue Router的官方示例改造

    基于Vue Router 2018年8月的官方文档示例,改造一下,通过一个最简单的例子,解决很多初学者的一个困惑. 首先是官方文档示例代码 <!DOCTYPE html> <html ...

随机推荐

  1. Android插件化(二):使用DexClassLoader动态载入assets中的apk

    Android插件化(二):使用DexClassLoader动态载入assets中的apk 简单介绍 上一篇博客讲到.我们能够使用MultiDex.java载入离线的apk文件.须要注意的是,apk中 ...

  2. Linux下MySQL导入导出数据库

    linux下 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql# ...

  3. typeof 和 instanceof 的区别

    在JavaScript中我们想得到一个变量的类型,我们一般会用typeof 得到这个类型的 字符串,但是对于引用类型,typeof始终会返回一个"object",在我们js中有十个 ...

  4. POJ 2459 模拟

    题意: 思路: 按照题意模拟即可 //By SiriusRen #include <cstdio> using namespace std; int c,f1,f2,d,xx,yy,vis ...

  5. Token ,Cookie和Session的区别--学习笔记

    http://blog.csdn.net/tobetheender/article/details/52485948 Token token的意思是“令牌”,是用户身份的验证方式,最简单的token组 ...

  6. Css学习总结(1)——20个很有用的CSS技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...

  7. 9.使用 npm 命令安装模块

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html npm 安装 Node.js 模块语法格式如下: $ npm install <Modu ...

  8. Filebeat之input和output(包含Elasticsearch Output 、Logstash Output、 Redis Output、 File Output和 Console Output)

    前提博客 https://i.cnblogs.com/posts?categoryid=972313 Filebeat啊,根据input来监控数据,根据output来使用数据!!! Filebeat的 ...

  9. Django项目之Web端电商网站的实战开发(一)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 目录 一丶项目介绍 二丶电商项目开发流程 三丶项目需求 四丶项目架构概览 五丶项目数据库设计 六丶项目框架搭建 一丶项目介绍 产品 ...

  10. Direct2D开发:向 MFC 项目添加 Direct2D 对象

    0X01 创建 MFC 应用程序: 在“文件”菜单上指向“新建”,然后单击“项目”. 在“新建项目”对话框左窗格的“已安装的模板”下,展开“Visual C++”,然后选择“MFC”. 在中间窗格中, ...