For example, we have a component which just simply render router-outlet:

import { Component } from '@angular/core';

@Component({
selector: 'mail-app',
styleUrls: ['mail-app.component.scss'],
template: `
<div class="mail">
<router-outlet></router-outlet>
</div>
`
})
export class MailAppComponent {}
export const ROUTES: Routes = [
{ path: 'folder/:name', component: MailFolderComponent }
];

We can add events to router-outlet:

import { Component } from '@angular/core';

@Component({
selector: 'mail-app',
styleUrls: ['mail-app.component.scss'],
template: `
<div class="mail">
<router-outlet
(activate)="onActivate($event)"
(deactivate)="onDeactivate($event)"
></router-outlet>
</div>
`
})
export class MailAppComponent {
onActivate(event) {
console.log(event)
} onDeactivate(event) {
console.log(event)
}
}

When we log out the, we see the actual component been rendered into the router-outlet.

[Angular] Router outlet events的更多相关文章

  1. 使用Angular Router导航基础

    名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...

  2. [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)

    前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...

  3. [Angular Router] Lazy loading Module with Auxiliary router

    Found the way to handle Auxiliary router for lazy loading moudle and erge load module are different. ...

  4. MVC route 和 Angular router 单页面的一些方式

    直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...

  5. [Angular 2] Using events and refs

    This lesson shows you how set listen for click events using the (click) syntax. It also covers getti ...

  6. [Angular] Progress HTTP Events with 'HttpRequest'

    New use case that is supported by the HTTP client is Progress events. To receive these events, we cr ...

  7. angular router ui bug !

    https://github.com/angular-ui/ui-router/issues/600 https://github.com/angular-ui/ui-router/issues/22 ...

  8. [Angular] Adding keyboard events to our control value accessor component

    One of the most important thing when building custom form component is adding accessbility support. ...

  9. [Angular2 Router] Setup page title with Router events

    Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...

随机推荐

  1. 1.25 Python知识进阶 - 封装

    封装 示例代码: class Role(object): count = 0 def __init__(self,name,role,weapon,life_value=100,money=15000 ...

  2. php学习笔记6

    PHP 字符串变量 PHP 中的字符串变量 字符串变量用于包含有字符的值. 在创建字符串之后,我们就可以对它进行操作了.您可以直接在函数中使用字符串,或者把它存储在变量中. 在下面的实例中,我们创建一 ...

  3. (转)Tomcat目录结构

    首先来了解一下Tomcat5.5的目录结构: /bin:存放windows或Linux平台上启动和关闭Tomcat的脚本文件 /conf:存放Tomcat服务器的各种全局配置文件,其中包括server ...

  4. 用两个栈实现队列与用两个队列实现栈(Python实现)

    用两个栈实现队列: class QueueWithTwoStacks(object): def __init__(self): self._stack1 = [] self._stack2 = [] ...

  5. JavaScript学习总结(4)——JavaScript数组

    JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.ArrayList.Hashtable等的超强综合体. 一.数组的声明 常规方式声明: ...

  6. web.xml的配置及加载顺序

    一web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...

  7. 玩转Bootstrap(基础) -- (6.导航条基础)

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  8. 13.Zookeeper的java客户端API使用方法

    转自:https://blog.csdn.net/jiuqiyuliang/article/details/56012027

  9. 2.Web开发过程流程图

    转自:https://blog.csdn.net/hello_simon/article/details/19993343 最近公司在进行一系列新模块的开发,在痛苦开发的过程中,大家不时在一起进行总结 ...

  10. 1.IntelliJ IDEA搭建SpringBoot的小Demo

    转自:http://www.cnblogs.com/weizaibug/p/6657077.html 首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提 ...