一、辅助路由语法

同时控制多个插座内容。

第一步:

模版上除了主插座,还需要声明一个带name属性的插座

第二步:

路由配置中配置name为aux的插座上可以显示哪些组件,比如显示xxx和yyy组件。

第三步:

在导航时候,路由到某个地址时,辅助的插座上显示哪个组件

二、实例

聊天功能可以在任何页面(商品列表页面,商品详情页面,主页面等)使用。

第一步:在app组件的模版上在定义一个插座来显示聊天面板。

<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()">
<router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

第二步:单独开发一个聊天室组件,只显示在新定义的插座上。

新建聊天组件并修改模版

ng g c chat
<textarea
placeholder="请输入聊天内容" n
class="chat"
ame="" id="" cols="30" rows="10"></textarea>
.chat{
background: green;
height: 100px;
width: 30%;
float: left;
box-sizing: border-box;
}

修改home组件和product组件模版,包一层div并设置样式

.product{
background: yellow;
height: 100px;
width: 70%;
float: left;
box-sizing: border-box;
} .home{
background: red;
height: 100px;
width: 70%;
float: left;
box-sizing: border-box;
}

配置路由决定聊天组件是否显示

const routes: Routes = [
{ path: '', redirectTo : 'home',pathMatch:'full' },
{ path: 'chat', component: ChatComponent, outlet: "aux"},//辅助路由
{ path: 'home', component: HomeComponent },
{ path: 'product/:id', component: ProductComponent, children:[
{ path: '', component : ProductDescComponent },
{ path: 'seller/:id', component : SellerInfoComponent }
] },
{ path: '**', component: Code404Component }
];

第三步:通过路由参数控制新插座是否显示聊天面板

增加开始聊天和结束聊天按钮

<!--The content below is only a placeholder and can be replaced.-->
<a [routerLink]="['/home']">主页</a>
<a [routerLink]="['/product',2]">商品详情</a>
<input type="button" value="商品详情" (click)="toProductDetails()"> <a [routerLink]="[{outlets: {aux: 'chat'}}]">开始聊天</a>
<a [routerLink]="[{outlets: {aux: null}}]">结束聊天</a> <router-outlet></router-outlet>
<router-outlet name="aux"></router-outlet>

效果:

点开始聊天,URL后面多了一个(aux:chat) :辅助路由aux插座路由路径是chat,chat路径对应显示ChatComponent。

主路由可随意切换,不影响辅助路由

http://localhost:4200/home(aux:chat)
http://localhost:4200/product/2(aux:chat)

扩展:如果想展示chat组件时候,主路由要跳到home组件上。

用priamry指定主路由路径,因为主路由没有名字。

<a [routerLink]="[{outlets: {primary: 'home' , aux: 'chat'}}]">开始聊天</a>

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:http://www.cnblogs.com/starof/p/9006227.html 有问题欢迎与我讨论,共同进步。

Angular路由——辅助路由的更多相关文章

  1. Angular 4 辅助路由

    1.辅助路由 2. 创建chat组件 ng g component chat 3. 组件html css: .chat{ background:green; height:100px; width:2 ...

  2. angular路由详解五(辅助路由)

    在HTML文件中 //主路由 <router-outlet></router-outlet> //辅助路由 <router-outlet  name="aux& ...

  3. Angular路由——子路由

    一.子路由语法: 二.实例 在商品详情页面,除了显示商品id信息,还显示了商品描述,和销售员的信息. 通过子路由实现商品描述组件和销售员信息组件展示在商品详情组件内部. 1.新建2个组件修改其内容 n ...

  4. Angular : 绑定, 参数传递, 路由

    如何把jquery导入angular npm install jquery --savenpm install @type/jquery --save-dev "node_modules/z ...

  5. angular.js的路由和模板在asp.net mvc 中的使用

    angular.js的路由和模板在asp.net mvc 中的使用 我们知道angular.js是基于mvc 的一款优秀js框架,它也有一套自己的路由机制,和asp.net mvc 路由不太一样.as ...

  6. angular4 辅助路由

    1.辅助路由 2. 创建chat组件 ng g component chat 3. 组件html css: 1 2 3 4 5 6 7 .chat{   background:green;   hei ...

  7. Angular routing生成路由和路由的跳转

    Angular routing生成路由和路由的跳转 什么是路由 路由的目的是可以让根组件按照不同的需求动态加载不同的组件. 根据不同地址,加载不同组件,实现单页面应用. Angular 命令创建一个配 ...

  8. Angular学习笔记—路由(转载)

    创建路由 1.首先安装 Angular Router.你可以通过运行以下任一操作来执行此操作: yarn add @angular/router # OR npm i --save @angular/ ...

  9. Angular 监听路由变化

    var app = angular.module('Mywind',['ui.router']) //Angular 监听路由变化 function run($ionicPlatform, $loca ...

随机推荐

  1. Java基础-1

    基础知识 1.进制 1.十进制 2.二进制 3.十六进制 2.十六进制转换 二进制转换 十进制转换

  2. Django 视图系统

    Django 视图系统 概念 一个视图函数,简称视图,是一个简单的Python函数,用于接受Web请求并返回Web响应. 通常将视图函数写在project或app目录中的名为views.py文件中 简 ...

  3. radio,check美化

    单选框与复选框原生控件美化有多种解决方案,现在采用经典的input+label的方式自己实现一种 思路: input 和label 通过id和for属性关联,点击label时,input选中状态改变 ...

  4. vue实战记录(三)- vue实现购物车功能之渲染商品列表

    vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(三) GitHub:sue ...

  5. bootstrap学习: 基本组件以及布局;

    1.下拉菜单: <div class="btn-group"> <button type="button" class="btn b ...

  6. busybox(二)编译

    title: busybox(二)编译 tag: arm date: 2018-11-13 23:14:58 --- busybox(二)编译 解压,源码包在busybox-1.7.0.tar.bz2 ...

  7. 金融量化分析【day110】:Pandas的Series对象

    一.pandas简介安装 pandas是一个强大的python数据分析的工具包 pandsa是基于NumPy构建的 1.pandas的主要功能 1.具备对其功能的数据结构DataFrame.Serie ...

  8. django - 总结 - redis缓存

    八.redis 补充- 操作 - 增删改查 对字典,重新设计结构,增删改查. hmset  keys  hget   scan_iter  hgetall  import redis import j ...

  9. redis发布/订阅

    发布订阅简介 Redis 发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息,消息之间通过channel传递. 准备工作 两台安装了redis的机器(虚拟 ...

  10. 小程序图片转Base64

    在小程序中,有些业务要用到 图片的 base64 wx.chooseImage({ success: res => { wx.getFileSystemManager().readFile({ ...