[Angular] Router outlet events
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的更多相关文章
- 使用Angular Router导航基础
名称 简介 Routes 路由配置,保存着那个URL对应着哪个组件,以及在哪个RouterOulet中展示组件. RouterOutlet 在HTML中标记路由内容呈现位置的占位符指令. Router ...
- [从 0 开始的 Angular 生活]No.38 实现一个 Angular Router 切换组件页面(一)
前言 今天是进入公司的第三天,为了能尽快投入项目与成为团队可用的战力,我正在努力啃官方文档学习 Angular 的知识,所以这一篇文章主要是记录我如何阅读官方文档后,实现这个非常基本的.带导航的网页应 ...
- [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. ...
- MVC route 和 Angular router 单页面的一些方式
直接看代码和注释吧 ASP.NET MVC router public class RouteConfig { public static void RegisterRoutes(RouteColle ...
- [Angular 2] Using events and refs
This lesson shows you how set listen for click events using the (click) syntax. It also covers getti ...
- [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 ...
- angular router ui bug !
https://github.com/angular-ui/ui-router/issues/600 https://github.com/angular-ui/ui-router/issues/22 ...
- [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. ...
- [Angular2 Router] Setup page title with Router events
Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...
随机推荐
- 【agc014d】Black and White Tree
又是被虐的一天呢~(AC是不可能的,这辈子不可能AC的.做题又不会做,就是打打暴力,才能维持骗骗分这样子.在机房里的感觉比回家的感觉好多了!里面个个都是大佬,个个都是死宅,我超喜欢在里面的!) (↑以 ...
- CSS笔记 - SVG Polyline 图片绘制动画边框
<style> div{ width: 420px; height: 200px; background: url('./img/timg.jpg') no-repeat; } polyl ...
- Python Unittest模块测试执行
记录一下Unittest的测试执行相关的点 一.测试用例执行的几种方式 1.通过unittest.main()来执行测试用例的方式: if __name__ == "__main__&quo ...
- Arch Linux实体机安装记录
下面将记录笔者在戴尔笔记本安装arch linux的过程,用于记录,以便下次使用. 本文的内容参考arch linux官方Wiki. 首先,使用Power ISO把镜像安装到U盘,使用U盘安装. 通过 ...
- Project Euler 435 Polynomials of Fibonacci numbers (矩阵快速幂)
题目链接: https://projecteuler.net/problem=435 题意: The Fibonacci numbers $ {f_n, n ≥ 0}$ are defined rec ...
- 关于python的二维数组
test =[ [1, 2, 3], [4, 5, 6], [7, 8, 9]] #这个就可以看做是二维数组了,直接创建print(test)print(test[:][1]) ...
- 8、for 、emumrate、range、if
1.for循环用户按照顺序循环可迭代对象中的内容,PS:break.continueli = [11,22,33,44]for item in li: print item 2.enumrate 为可 ...
- python分解质因数
将一个正整数分解质因数.例如:输入90,打印出90=2*3*3*5. # !/usr/bin/env python # -*- coding:utf-8 -*- # Author:Hiuhung Wa ...
- 实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;)
实现span设置宽度(行内元素本来不支持调宽度高度这些样式)(变成行内块元素:display:inline-block;) 一.总结 1.将span从行内元素变成行内快元素就可以调了: 设置样式的时候 ...
- TableView相关属性
//是否要显示分隔线 tableView.separatorStyle = UITableViewCellSeparatorStyleNone; tableView.separatorStyle = ...