[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 ...
随机推荐
- ubuntu14.04 printk()默认打印的位置
tail /var/log/syslog 即可显示printk打印的信息
- windows防火墙开放zabbix端口(批处理)
windows系统在防火墙开启的情况下,打开zabbix端口(10050与10051) 可以手动添加规则,也可以使用批处理生成. 一.下面先介绍批处理 netsh advfirewall firewa ...
- C++访问WebService gSoap方式
一. gSOAP访问WebService 1. 下载gSOAP gSOAP 2.7.17 版下载地址http://sourceforge.net/projects/g ...
- CODEVS——T1332 上白泽慧音 || 洛谷——P1726 上白泽慧音
http://codevs.cn/problem/1332/|| https://www.luogu.org/problem/show?pid=1726#sub 时间限制: 1 s 空间限制: 1 ...
- [RxJS] Learn How To Use RxJS 5.5 Beta 2
The main changes is about how you import rxjs opreators from now on. And introduce lettable opreator ...
- Lamp(linux+apache+mysql+php)环境搭建
Lamp(linux+apache+mysql+php)环境搭建 .安装apache2:sudo apt-get installapache2 安装完毕后.执行例如以下命令重新启动apache:sud ...
- 前端面试题(HTML/CSS)
(前端面试题大全,持续更新) 常用的块级元素和行内元素有哪些?说说他们的特点? 浮动产生的原因?清除浮动? 说说一下盒模型 float和position一起用是什么效果 rem用过吗?做不同手机的适配 ...
- 洛谷 P1097 统计数字
P1097 统计数字 题目描述 某次科研调查时得到了n个自然数,每个数均不超过1500000000(1.5*10^9).已知不相同的数不超过10000个,现在需要统计这些自然数各自出现的次数,并按照自 ...
- 编程——C语言的问题,堆栈
堆和栈的区别一.预备知识—程序的内存分配一个由c/C++编译的程序占用的内存分为以下几个部分 1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结 ...
- UVA 11584 - Partitioning by Palindromes DP
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...