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

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'mail-app',
  5. styleUrls: ['mail-app.component.scss'],
  6. template: `
  7. <div class="mail">
  8. <router-outlet></router-outlet>
  9. </div>
  10. `
  11. })
  12. export class MailAppComponent {}
  1. export const ROUTES: Routes = [
  2. { path: 'folder/:name', component: MailFolderComponent }
  3. ];

We can add events to router-outlet:

  1. import { Component } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'mail-app',
  5. styleUrls: ['mail-app.component.scss'],
  6. template: `
  7. <div class="mail">
  8. <router-outlet
  9. (activate)="onActivate($event)"
  10. (deactivate)="onDeactivate($event)"
  11. ></router-outlet>
  12. </div>
  13. `
  14. })
  15. export class MailAppComponent {
  16. onActivate(event) {
  17. console.log(event)
  18. }
  19.  
  20. onDeactivate(event) {
  21. console.log(event)
  22. }
  23. }

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. 【agc014d】Black and White Tree

    又是被虐的一天呢~(AC是不可能的,这辈子不可能AC的.做题又不会做,就是打打暴力,才能维持骗骗分这样子.在机房里的感觉比回家的感觉好多了!里面个个都是大佬,个个都是死宅,我超喜欢在里面的!) (↑以 ...

  2. CSS笔记 - SVG Polyline 图片绘制动画边框

    <style> div{ width: 420px; height: 200px; background: url('./img/timg.jpg') no-repeat; } polyl ...

  3. Python Unittest模块测试执行

    记录一下Unittest的测试执行相关的点 一.测试用例执行的几种方式 1.通过unittest.main()来执行测试用例的方式: if __name__ == "__main__&quo ...

  4. Arch Linux实体机安装记录

    下面将记录笔者在戴尔笔记本安装arch linux的过程,用于记录,以便下次使用. 本文的内容参考arch linux官方Wiki. 首先,使用Power ISO把镜像安装到U盘,使用U盘安装. 通过 ...

  5. Project Euler 435 Polynomials of Fibonacci numbers (矩阵快速幂)

    题目链接: https://projecteuler.net/problem=435 题意: The Fibonacci numbers $ {f_n, n ≥ 0}$ are defined rec ...

  6. 关于python的二维数组

    test =[ [1, 2, 3], [4, 5, 6], [7, 8, 9]]   #这个就可以看做是二维数组了,直接创建print(test)print(test[:][1])           ...

  7. 8、for 、emumrate、range、if

    1.for循环用户按照顺序循环可迭代对象中的内容,PS:break.continueli = [11,22,33,44]for item in li: print item 2.enumrate 为可 ...

  8. python分解质因数

    将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wa ...

  9. 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)

    实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...

  10. TableView相关属性

    //是否要显示分隔线 tableView.separatorStyle = UITableViewCellSeparatorStyleNone; tableView.separatorStyle = ...