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. [Python] Understand Scope in Python

    Misunderstanding scope can cause problems in your application. Watch this lesson to learn how Python ...

  2. 为SSD编程(4)——高级功能和内部并行

    原文 http://codecapsule.com/2014/02/12/coding-for-ssds-part-4-advanced-functionalities-and-internal-pa ...

  3. Android自己定义动态布局 — 多图片上传

    Android自己定义动态布局 - 多图片上传 本文介绍Android中动态布局加入图片,多图片上传. 项目中效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5 ...

  4. 变量get、set设置

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  5. 8.ZOrder

    T3LayerZorder.h #pragma once #include "cocos2d.h" USING_NS_CC; class T3LayerZorder:public ...

  6. 微信小程序---app.json中设置背景色不生效解决办法

    按照官方文档的说明,backgroundColor应该可以设置窗口的背景色. "window":{ "backgroundTextStyle":"li ...

  7. element-ui一些注意点:

    1.change ($event,“你要传递的其他值”),使用el-select组件时,想传递多个值. 或者 在el-option上的value属性上传递对象 eg: :value="{'c ...

  8. WebMethod Description

    http://www.webxml.com.cn/WebServices/WeatherWebService.asmx https://www.cnblogs.com/wanganyi/p/72202 ...

  9. 00081_List接口

    1.List接口介绍 (1)有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的元 ...

  10. 【Codeforces Round #456 (Div. 2) B】New Year's Eve

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 显然10000..取到之后 再取一个01111..就能异或成最大的数字了. [代码] /* 1.Shoud it use long ...